├── .classpath ├── .eslintrc.js ├── .github ├── FUNDING.yml ├── issue_template.md └── workflows │ └── release.yml ├── .gitignore ├── .gitmodules ├── .npmrc ├── .prettierignore ├── .prettierrc.js ├── .project ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── .yarnrc.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── build.gradle ├── config.json ├── demo-snippets ├── App_Resources │ └── Android │ │ └── src │ │ └── main │ │ └── res │ │ └── values │ │ └── styles.xml ├── app.scss ├── ng │ ├── activity-indicator │ │ ├── activity-indicator.component.html │ │ ├── activity-indicator.component.ts │ │ └── activity-indicator.module.ts │ ├── bottom-navigation-bar │ │ ├── bottom-navigation-bar.component.html │ │ ├── bottom-navigation-bar.component.ts │ │ ├── bottom-navigation-bar.module.ts │ │ ├── first-tab │ │ │ ├── first-tab.component.html │ │ │ └── first-tab.component.ts │ │ └── third-tab │ │ │ ├── third-tab.component.html │ │ │ └── third-tab.component.ts │ ├── bottom-sheet │ │ ├── bottom-sheet.component.html │ │ ├── bottom-sheet.component.ts │ │ ├── bottom-sheet.module.ts │ │ ├── login-options.component.html │ │ └── login-options.component.ts │ ├── buttons │ │ ├── buttons.component.html │ │ ├── buttons.component.ts │ │ └── buttons.module.ts │ ├── cards │ │ ├── cards.component.html │ │ ├── cards.component.ts │ │ └── cards.module.ts │ ├── install.module.ts │ ├── progress │ │ ├── progress.component.html │ │ ├── progress.component.ts │ │ └── progress.module.ts │ ├── ripple │ │ ├── ripple.component.html │ │ ├── ripple.component.ts │ │ └── ripple.module.ts │ ├── slider │ │ ├── slider.component.html │ │ ├── slider.component.ts │ │ └── slider.module.ts │ ├── tabs │ │ ├── tabs.component.html │ │ ├── tabs.component.ts │ │ └── tabs.module.ts │ └── text-field │ │ ├── text-field.component.html │ │ ├── text-field.component.ts │ │ └── text-field.module.ts ├── package.json ├── postinstall.js ├── preuninstall.js ├── scripts │ └── after-prepare.js ├── svelte │ ├── Buttons.svelte │ └── install.ts ├── vue │ ├── ActivityIndicators.vue │ ├── BottomNavigation.vue │ ├── BottomNavigationBar.vue │ ├── BottomSheet.vue │ ├── BottomSheetInner.vue │ ├── BottomSheetInnerFrame.vue │ ├── BottomSheetInnerKeyboard.vue │ ├── ButtonIssue.vue │ ├── Buttons.vue │ ├── CardViews.vue │ ├── Dialogs.vue │ ├── Mixins.vue │ ├── ProgressBars.vue │ ├── Ripples.vue │ ├── Sliders.vue │ ├── SnackBar.vue │ ├── Speeddial.vue │ ├── Tabs.vue │ ├── TextFields.vue │ ├── TextView.vue │ └── install.ts ├── vue3 │ ├── ActivityIndicators.vue │ ├── BottomNavigation.vue │ ├── BottomNavigationBar.vue │ ├── BottomSheet.vue │ ├── BottomSheetInner.vue │ ├── BottomSheetInnerKeyboard.vue │ ├── ButtonIssue.vue │ ├── Buttons.vue │ ├── CardViews.vue │ ├── Dialogs.vue │ ├── Mixins.vue │ ├── ProgressBars.vue │ ├── Ripples.vue │ ├── Sliders.vue │ ├── SnackBar.vue │ ├── Speeddial.vue │ ├── TextFields.vue │ ├── TextView.vue │ └── install.ts ├── webpack.config.ng.js ├── webpack.config.svelte.js ├── webpack.config.vue.js └── webpack.config.vue3.js ├── docs ├── .nojekyll ├── assets │ ├── hierarchy.js │ ├── highlight.css │ ├── icons.js │ ├── icons.svg │ ├── main.js │ ├── navigation.js │ ├── search.js │ └── style.css ├── classes │ ├── _nativescript-community_ui-material-activityindicator.ActivityIndicator.html │ ├── _nativescript-community_ui-material-bottomnavigationbar.BottomNavigationBar.html │ ├── _nativescript-community_ui-material-bottomnavigationbar.BottomNavigationTab.html │ ├── _nativescript-community_ui-material-bottomsheet.ViewWithBottomSheetBase.html │ ├── _nativescript-community_ui-material-button.Button.html │ ├── _nativescript-community_ui-material-cardview.CardView.html │ ├── _nativescript-community_ui-material-core.Themer.html │ ├── _nativescript-community_ui-material-dialogs.AlertDialog.html │ ├── _nativescript-community_ui-material-floatingactionbutton.FloatingActionButton.html │ ├── _nativescript-community_ui-material-progress.Progress.html │ ├── _nativescript-community_ui-material-ripple.Ripple.html │ ├── _nativescript-community_ui-material-slider.Slider.html │ ├── _nativescript-community_ui-material-snackbar.SnackBar.html │ ├── _nativescript-community_ui-material-speedial.SpeedDial.html │ ├── _nativescript-community_ui-material-speedial.SpeedDialButton.html │ ├── _nativescript-community_ui-material-speedial.SpeedDialItem.html │ ├── _nativescript-community_ui-material-speedial.SpeedDialItemBase.html │ ├── _nativescript-community_ui-material-speedial.SpeedDialItemButton.html │ ├── _nativescript-community_ui-material-speedial.SpeedDialItemTitle.html │ ├── _nativescript-community_ui-material-switch.Switch.html │ ├── _nativescript-community_ui-material-tabs.TabContentItem.html │ ├── _nativescript-community_ui-material-tabs.TabStrip.html │ ├── _nativescript-community_ui-material-tabs.TabStripItem.html │ ├── _nativescript-community_ui-material-tabs.Tabs.html │ ├── _nativescript-community_ui-material-textfield.TextField.html │ └── _nativescript-community_ui-material-textview.TextView.html ├── enums │ ├── _nativescript-community_ui-material-bottomnavigationbar.TitleVisibility.html │ ├── _nativescript-community_ui-material-core.CornerFamily.html │ ├── _nativescript-community_ui-material-snackbar.DismissReasons.html │ └── _nativescript-community_ui-material-snackbar.SnackBarAction.html ├── functions │ ├── _nativescript-community_ui-material-bottomsheet.install.html │ ├── _nativescript-community_ui-material-core.applyMixins.html │ ├── _nativescript-community_ui-material-core.cssProperty.html │ ├── _nativescript-community_ui-material-core.getRippleColor.html │ ├── _nativescript-community_ui-material-core.install.html │ ├── _nativescript-community_ui-material-core.installMixins.html │ ├── _nativescript-community_ui-material-core.mixin.html │ ├── _nativescript-community_ui-material-dialogs.action.html │ ├── _nativescript-community_ui-material-dialogs.alert.html │ ├── _nativescript-community_ui-material-dialogs.confirm.html │ ├── _nativescript-community_ui-material-dialogs.login.html │ ├── _nativescript-community_ui-material-dialogs.prompt.html │ ├── _nativescript-community_ui-material-snackbar.showSnack.html │ ├── _nativescript-community_ui-material-textfield.initTextInputEditText.html │ └── _nativescript-community_ui-material-textview.initTextInputEditText.html ├── hierarchy.html ├── index.html ├── interfaces │ ├── _nativescript-community_ui-material-bottomnavigationbar.TabPressedEventData.html │ ├── _nativescript-community_ui-material-bottomnavigationbar.TabReselectedEventData.html │ ├── _nativescript-community_ui-material-bottomnavigationbar.TabSelectedEventData.html │ ├── _nativescript-community_ui-material-bottomsheet.BottomSheetOptions.html │ ├── _nativescript-community_ui-material-core.ShapeProperties.html │ ├── _nativescript-community_ui-material-core.TypographyOptions.html │ ├── _nativescript-community_ui-material-dialogs.LoginOptions.html │ ├── _nativescript-community_ui-material-dialogs.MDCAlertControlerOptions.html │ ├── _nativescript-community_ui-material-dialogs.PromptOptions.html │ └── _nativescript-community_ui-material-snackbar.SnackBarOptions.html ├── media │ └── CHANGELOG.md ├── modules.html ├── modules │ ├── _nativescript-community_ui-material-activityindicator.html │ ├── _nativescript-community_ui-material-bottomnavigationbar.html │ ├── _nativescript-community_ui-material-bottomsheet.html │ ├── _nativescript-community_ui-material-button.html │ ├── _nativescript-community_ui-material-cardview.html │ ├── _nativescript-community_ui-material-core.html │ ├── _nativescript-community_ui-material-dialogs.html │ ├── _nativescript-community_ui-material-floatingactionbutton.html │ ├── _nativescript-community_ui-material-progress.html │ ├── _nativescript-community_ui-material-ripple.html │ ├── _nativescript-community_ui-material-slider.html │ ├── _nativescript-community_ui-material-snackbar.html │ ├── _nativescript-community_ui-material-speedial.html │ ├── _nativescript-community_ui-material-switch.html │ ├── _nativescript-community_ui-material-tabs.html │ ├── _nativescript-community_ui-material-textfield.html │ └── _nativescript-community_ui-material-textview.html ├── types │ ├── _nativescript-community_ui-material-tabs.IOSTabBarItemsAlignment.html │ ├── _nativescript-community_ui-material-textfield.PropType.html │ ├── _nativescript-community_ui-material-textfield.TextFieldProperties.html │ ├── _nativescript-community_ui-material-textview.PropType.html │ └── _nativescript-community_ui-material-textview.TextViewProperties.html └── variables │ ├── _nativescript-community_ui-material-core.dynamicElevationOffsetProperty.html │ ├── _nativescript-community_ui-material-core.elevationProperty.html │ ├── _nativescript-community_ui-material-core.rippleColorAlphaProperty.html │ ├── _nativescript-community_ui-material-core.rippleColorProperty.html │ ├── _nativescript-community_ui-material-core.shapeProperty.html │ ├── _nativescript-community_ui-material-core.themer-1.html │ ├── _nativescript-community_ui-material-core.variantProperty.html │ ├── _nativescript-community_ui-material-tabs.itemsProperty.html │ ├── _nativescript-community_ui-material-tabs.selectedIndexProperty.html │ └── _nativescript-community_ui-material-tabs.tabStripProperty.html ├── header.md ├── images ├── demo-activity-indicator.gif ├── demo-bottom-navigation.png ├── demo-bottom-sheet.png ├── demo-button.png ├── demo-cardview.png ├── demo-dialogs.png ├── demo-floatingactionbutton.png ├── demo-progress.gif ├── demo-ripple.gif ├── demo-slider.png ├── demo-snackbar.png ├── demo-speeddial.png ├── demo-tabs.png ├── demo-textfield.png └── demo-textview.png ├── info.md ├── lerna.json ├── package.json ├── packages ├── activityindicator │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── native-api-usage.json │ │ │ └── res │ │ │ │ ├── layout │ │ │ │ └── ns_material_circular_progress.xml │ │ │ │ └── values │ │ │ │ └── materialcircularprogressstyles.xml │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── bottom-navigation │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── bottomnavigationbar │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── bottomsheet │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── include.gradle │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── nativescript │ │ │ │ │ └── material │ │ │ │ │ └── bottomsheet │ │ │ │ │ ├── BottomSheetDialog.java │ │ │ │ │ └── BottomSheetDialogFragment.java │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── button │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── include.gradle │ │ │ ├── native-api-usage.json │ │ │ └── res │ │ │ │ ├── layout │ │ │ │ ├── ns_material_button.xml │ │ │ │ ├── ns_material_button_flat.xml │ │ │ │ ├── ns_material_button_flat_icon.xml │ │ │ │ ├── ns_material_button_icon.xml │ │ │ │ ├── ns_material_button_outline.xml │ │ │ │ ├── ns_material_button_outline_icon.xml │ │ │ │ ├── ns_material_button_text.xml │ │ │ │ └── ns_material_button_text_icon.xml │ │ │ │ └── values │ │ │ │ └── materialbuttonstyles.xml │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── cardview │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── core-tabs │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ └── android │ │ │ ├── AndroidManifest.xml │ │ │ ├── include.gradle │ │ │ └── java │ │ │ └── com │ │ │ └── nativescript │ │ │ └── material │ │ │ └── core │ │ │ ├── BottomNavigationBar.java │ │ │ ├── TabItemSpec.java │ │ │ ├── TabStrip.java │ │ │ └── TabsBar.java │ └── tsconfig.json ├── core │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── AndroidManifest.xml │ │ │ ├── include.gradle │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── nativescript │ │ │ │ │ └── material │ │ │ │ │ └── core │ │ │ │ │ └── Utils.java │ │ │ ├── native-api-usage.json │ │ │ └── res │ │ │ │ └── layout │ │ │ │ └── ns_material_page.xml │ │ └── ios │ │ │ └── Podfile │ ├── tsconfig.hooks.json │ └── tsconfig.json ├── dialogs │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── native-api-usage.json │ │ │ └── res │ │ │ │ └── values │ │ │ │ └── dialogsstyle.xml │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── floatingactionbutton │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── progress │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── native-api-usage.json │ │ │ └── res │ │ │ │ ├── layout │ │ │ │ └── ns_material_linear_progress.xml │ │ │ │ └── values │ │ │ │ └── materialprogressstyles.xml │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── ripple │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── slider │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── snackbar │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── include.gradle │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── nativescript │ │ │ │ │ └── material │ │ │ │ │ └── snackbar │ │ │ │ │ └── SnackCallback.java │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── speeddial │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ └── tsconfig.json ├── switch │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── tabs │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ └── native-api-usage.json │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json ├── textfield │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ │ ├── android │ │ │ ├── include.gradle │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── nativescript │ │ │ │ │ └── material │ │ │ │ │ └── textfield │ │ │ │ │ └── TextInputEditText.java │ │ │ ├── native-api-usage.json │ │ │ └── res │ │ │ │ ├── layout │ │ │ │ ├── ns_material_text_field.xml │ │ │ │ ├── ns_material_text_field_filled.xml │ │ │ │ └── ns_material_text_field_outline.xml │ │ │ │ └── values │ │ │ │ └── textfieldstyles.xml │ │ └── ios │ │ │ └── Podfile │ └── tsconfig.json └── textview │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ ├── android │ │ ├── include.gradle │ │ ├── java │ │ │ └── com │ │ │ │ └── nativescript │ │ │ │ └── material │ │ │ │ └── textview │ │ │ │ └── TextViewInputEditText.java │ │ ├── native-api-usage.json │ │ └── res │ │ │ ├── layout │ │ │ ├── ns_material_text_view.xml │ │ │ ├── ns_material_text_view_filled.xml │ │ │ └── ns_material_text_view_outline.xml │ │ │ └── values │ │ │ └── textviewstyles.xml │ └── ios │ │ └── Podfile │ └── tsconfig.json ├── pnpm-workspace.yaml ├── references.d.ts ├── schema └── tns.xsd ├── src ├── activityindicator │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── index-common.ts │ ├── index.android.ts │ ├── index.d.ts │ ├── index.ios.ts │ └── vue │ │ └── index.ts ├── appbar │ ├── angular │ │ ├── app-bar.ts │ │ ├── appbar.directive.ts │ │ ├── material-components.module.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── references.d.ts │ │ └── tsconfig.json │ ├── appbar-common.ts │ ├── appbar.d.ts │ └── appbar.ios.ts ├── bottom-navigation │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── index.android.ts │ ├── index.d.ts │ ├── index.ios.ts │ ├── react │ │ └── index.ts │ └── vue │ │ ├── component.ts │ │ └── index.ts ├── bottomnavigationbar │ ├── angular │ │ ├── directives.ts │ │ ├── index.ts │ │ ├── module.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── bottomnavigationbar-common.ts │ ├── bottomnavigationbar.android.ts │ ├── bottomnavigationbar.d.ts │ ├── bottomnavigationbar.ios.ts │ └── vue │ │ └── index.ts ├── bottomsheet │ ├── angular │ │ ├── bottomsheet.module.ts │ │ ├── bottomsheet.service.ts │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── bottomsheet-common.ts │ ├── bottomsheet.android.ts │ ├── bottomsheet.d.ts │ ├── bottomsheet.ios.ts │ ├── svelte │ │ └── index.ts │ ├── vue │ │ └── index.ts │ └── vue3 │ │ └── index.ts ├── button │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── button-common.ts │ ├── button.android.ts │ ├── button.d.ts │ ├── button.ios.ts │ ├── svelte │ │ └── index.ts │ └── vue │ │ └── index.ts ├── cardview │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── cardview-common.ts │ ├── cardview.android.ts │ ├── cardview.d.ts │ ├── cardview.ios.ts │ └── vue │ │ └── index.ts ├── core-tabs │ ├── react │ │ └── index.ts │ ├── tab-content-item │ │ ├── index.android.ts │ │ ├── index.d.ts │ │ ├── index.ios.ts │ │ └── tab-content-item-common.ts │ ├── tab-navigation-base │ │ └── index.ts │ ├── tab-navigation │ │ ├── index-common.ts │ │ ├── index.android.ts │ │ ├── index.d.ts │ │ └── index.ios.ts │ ├── tab-strip-item │ │ └── index.ts │ └── tab-strip │ │ └── index.ts ├── core │ ├── android │ │ └── utils.ts │ ├── cssproperties.ts │ ├── index.android.ts │ ├── index.common.ts │ ├── index.d.ts │ ├── index.ios.ts │ └── textbase │ │ └── cssproperties.ts ├── dialogs │ ├── dialogs-common.ts │ ├── dialogs.android.ts │ ├── dialogs.d.ts │ └── dialogs.ios.ts ├── floatingactionbutton │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── floatingactionbutton-common.ts │ ├── floatingactionbutton.android.ts │ ├── floatingactionbutton.d.ts │ ├── floatingactionbutton.ios.ts │ └── vue │ │ └── index.ts ├── page │ ├── page.android.ts │ ├── page.d.ts │ └── page.ios.ts ├── progress │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── progress-common.ts │ ├── progress.android.ts │ ├── progress.d.ts │ ├── progress.ios.ts │ └── vue │ │ └── index.ts ├── references.d.ts ├── ripple │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── ripple-common.ts │ ├── ripple.android.ts │ ├── ripple.d.ts │ ├── ripple.ios.ts │ └── vue │ │ └── index.ts ├── slider │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── cssproperties.ts │ ├── slider-common.ts │ ├── slider.android.ts │ ├── slider.d.ts │ ├── slider.ios.ts │ └── vue │ │ └── index.ts ├── snackbar │ ├── snackbar-common.ts │ ├── snackbar.android.ts │ ├── snackbar.d.ts │ └── snackbar.ios.ts ├── speeddial │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── index.ts │ └── vue │ │ └── index.ts ├── switch │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── index-common.ts │ ├── index.android.ts │ ├── index.d.ts │ ├── index.ios.ts │ └── vue │ │ └── index.ts ├── tabs │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ └── tsconfig.json │ ├── index.android.ts │ ├── index.d.ts │ ├── index.ios.ts │ ├── react │ │ └── index.ts │ └── vue │ │ ├── component.ts │ │ └── index.ts ├── textfield │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── textvalue-accessor.ts │ │ └── tsconfig.json │ ├── textfield.android.ts │ ├── textfield.common.ts │ ├── textfield.d.ts │ ├── textfield.ios.old │ ├── textfield.ios.ts │ └── vue │ │ └── index.ts ├── textview │ ├── angular │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── textvalue-accessor.ts │ │ └── tsconfig.json │ ├── textview.android.ts │ ├── textview.common.ts │ ├── textview.d.ts │ ├── textview.ios.ts │ └── vue │ │ └── index.ts └── typings │ ├── MaterialComponents.ios.d.ts │ ├── MaterialTextField.ios.d.ts │ ├── extensions.android.d.ts │ ├── mdc.android.d.ts │ └── mdc.ios.d.ts ├── svelte.config.js ├── tsconfig.json ├── tsconfig.vue3.json └── yarn.lock /.classpath: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: './tools/.eslintrc.js' 3 | }; 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [farfromrefug] 2 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | ### Make sure to check the demo app(s) for sample usage 2 | 3 | ### Make sure to check the existing issues in this repository 4 | 5 | ### If the demo apps cannot help and there is no issue for your problem, tell us about it 6 | Please, ensure your title is less than 63 characters long and starts with a capital 7 | letter. 8 | 9 | ### Which platform(s) does your issue occur on? 10 | - iOS/Android/Both 11 | - iOS/Android versions 12 | - emulator or device. What type of device? 13 | 14 | ### Please, provide the following version numbers that your issue occurs with: 15 | 16 | - CLI: (run `tns --version` to fetch it) 17 | - Cross-platform modules: (check the 'version' attribute in the 18 | `node_modules/@nativescript/core/package.json` file in your project) 19 | - Runtime(s): (look for the `"tns-android"` and `"tns-ios"` properties in the `package.json` file of your project) 20 | - Plugin(s): (look for the version numbers in the `package.json` file of your 21 | project and paste your dependencies and devDependencies here) 22 | 23 | ### Please, tell us how to recreate the issue in as much detail as possible. 24 | Describe the steps to reproduce it. 25 | 26 | ### Is there any code involved? 27 | - provide a code example to recreate the problem 28 | - (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible. 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms 5 | 6 | # NativeScript Template 7 | *.js.map 8 | !ngcc.config.js 9 | !webpack.config.js 10 | 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # General 19 | .DS_Store 20 | .AppleDouble 21 | .LSOverride 22 | .idea 23 | .cloud 24 | .gradle 25 | .project 26 | .yarn 27 | .cxx 28 | tmp/ 29 | 30 | !.eslintrc.js 31 | !.prettierrc.js 32 | 33 | !e2e/*.js 34 | !detox.config.js 35 | devices.js 36 | 37 | *.framework 38 | *.xcframework 39 | **/*.js.map 40 | src/**/*.js 41 | packages/**/*.js 42 | packages/**/*.d.ts 43 | bin 44 | build 45 | Pods 46 | !packages/*/platforms 47 | /packages/**/*.aar 48 | /packages/**/*.framework 49 | /packages/**/*.xcframework 50 | /demo-snippets/**/*.aar 51 | *.xcuserdatad 52 | /packages/README.md 53 | packages/**/*js.map 54 | packages/**/*js 55 | packages/angular 56 | packages/typings 57 | packages/**/angular/*.json 58 | packages/**/*.ngsummary.json 59 | packages/**/*.metadata.json 60 | 61 | .vscode/settings.json 62 | 63 | /blueprint.md -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "demo-react"] 2 | path = demo-react 3 | url = https://github.com/nativescript-community/plugin-seed-demo-react.git 4 | [submodule "demo-svelte"] 5 | path = demo-svelte 6 | url = https://github.com/nativescript-community/plugin-seed-demo-svelte.git 7 | [submodule "demo-ng"] 8 | path = demo-ng 9 | url = https://github.com/nativescript-community/plugin-seed-demo-ng.git 10 | [submodule "demo-vue"] 11 | path = demo-vue 12 | url = https://github.com/nativescript-community/plugin-seed-demo-vue.git 13 | [submodule "tools"] 14 | path = tools 15 | url = https://github.com/nativescript-community/plugin-seed-tools.git 16 | [submodule "demo-vue3"] 17 | path = demo-vue3 18 | url = https://github.com/nativescript-community/plugin-seed-demo-vue3.git 19 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | public-hoist-pattern[]=*eslint* 3 | public-hoist-pattern[]=source-map-support 4 | public-hoist-pattern[]=ts-patch 5 | public-hoist-pattern[]=typescript 6 | public-hoist-pattern[]=cpy-cli 7 | strict-peer-dependencies=false 8 | shell-emulator=true 9 | auto-install-peers=false 10 | loglevel=error 11 | engine-strict=true 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules/ 3 | plugin/ 4 | docs/ 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 200, 3 | semi: true, 4 | tabWidth: 4, 5 | trailingComma: 'none', 6 | singleQuote: true 7 | }; 8 | -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | nativescript-material 4 | Project nativescript-material created by Buildship. 5 | 6 | 7 | 8 | 9 | org.eclipse.jdt.core.javabuilder 10 | 11 | 12 | 13 | 14 | org.eclipse.buildship.core.gradleprojectbuilder 15 | 16 | 17 | 18 | 19 | 20 | org.eclipse.jdt.core.javanature 21 | org.eclipse.buildship.core.gradleprojectnature 22 | 23 | 24 | 25 | 1682616481632 26 | 27 | 30 28 | 29 | org.eclipse.core.resources.regexFilterMatcher 30 | node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__ 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | 8 | { 9 | "name": "Launch on iOS", 10 | "type": "nativescript", 11 | "request": "launch", 12 | "platform": "ios", 13 | "appRoot": "${workspaceRoot}/demo-vue", 14 | "diagnosticLogging": false, 15 | "sourceMaps": true, 16 | "watch": true, 17 | "tnsArgs": ["--env.development"] 18 | }, 19 | { 20 | "name": "Attach on iOS", 21 | "type": "nativescript", 22 | "request": "attach", 23 | "platform": "ios", 24 | "appRoot": "${workspaceRoot}/demo-vue", 25 | "sourceMaps": true, 26 | "watch": false 27 | }, 28 | { 29 | "name": "Launch on Android", 30 | "type": "nativescript", 31 | "request": "launch", 32 | "platform": "android", 33 | "appRoot": "${workspaceRoot}/demo-vue", 34 | "sourceMaps": true, 35 | "watch": true 36 | }, 37 | { 38 | "name": "Attach on Android", 39 | "type": "nativescript", 40 | "request": "attach", 41 | "platform": "android", 42 | "appRoot": "${workspaceRoot}/demo-vue", 43 | "sourceMaps": true, 44 | "watch": false 45 | } 46 | ] 47 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "schema": true 4 | }, 5 | "search.exclude": { 6 | "**/platforms": false, 7 | "packages/**/platforms": false 8 | }, 9 | "xml.fileAssociations": [ 10 | { 11 | "systemId": "/Volumes/data/dev/nativescript/nativescript-material-components/schema/tns.xsd", 12 | "pattern": "**/**/*.xml" 13 | } 14 | ], 15 | "editor.snippetSuggestions": "top", 16 | "NE.enable.snippets": true, 17 | "java.configuration.updateBuildConfiguration": "disabled", 18 | "typescript.tsdk": "node_modules/typescript/lib" 19 | } 20 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "build.plugin", 9 | "path": "demo/platforms/ios/build/emulator/demo.app/app/", 10 | "problemMatcher": [ 11 | "$lessc" 12 | ] 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | nmHoistingLimits: workspaces 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: tools/.yarn/releases/yarn-4.0.1.cjs 8 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'java' 2 | 3 | // Use maven repository 4 | repositories { 5 | mavenCentral() 6 | google() 7 | } 8 | dependencies { 9 | implementation files('/Volumes/dev/androidSDK/platforms/android-28/android.jar') 10 | implementation "androidx.annotation:annotation:1.1.0" 11 | implementation "androidx.viewpager:viewpager:1.0.0" 12 | } 13 | sourceSets { 14 | main { 15 | java { 16 | srcDirs = ["packages/core/platforms/android/java"] 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "readme": true, 3 | "angular": true, 4 | "demos": [ 5 | "ng", 6 | "vue", 7 | "svelte", 8 | "react" 9 | ] 10 | } -------------------------------------------------------------------------------- /demo-snippets/App_Resources/Android/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17 | 18 | 20 | 21 | 22 | 29 | 30 | 32 | 33 | 34 | 39 | 40 | 42 | 43 | -------------------------------------------------------------------------------- /demo-snippets/ng/activity-indicator/activity-indicator.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 16 | 20 | 24 | 25 | -------------------------------------------------------------------------------- /demo-snippets/ng/activity-indicator/activity-indicator.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ns-activity-indicator', 5 | templateUrl: './activity-indicator.component.html', 6 | moduleId: module.id 7 | }) 8 | export class ActivityIndicatorComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /demo-snippets/ng/activity-indicator/activity-indicator.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialActivityIndicatorModule } from '@nativescript-community/ui-material-activityindicator/angular'; 4 | import { ActivityIndicatorComponent } from './activity-indicator.component'; 5 | 6 | @NgModule({ 7 | declarations: [ActivityIndicatorComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialActivityIndicatorModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class ActivityIndicatorModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/bottom-navigation-bar.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 | 21 | 26 | 31 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/bottom-navigation-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, ViewChild } from '@angular/core'; 2 | import { BottomNavigationBar, TabPressedEventData, TabReselectedEventData, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar'; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | selector: 'ns-bottom-navigation-bar', 7 | templateUrl: './bottom-navigation-bar.component.html' 8 | }) 9 | export class BottomNavigationBarComponent { 10 | @ViewChild('bottomNavigationBar', { read: ElementRef, static: false }) 11 | private _bottomNavigationBar: ElementRef; 12 | 13 | onbottomNavigationBarLoaded(): void { 14 | const bottomNavigationBar = this._bottomNavigationBar.nativeElement; 15 | bottomNavigationBar.showBadge(1); 16 | bottomNavigationBar.showBadge(2, 4); 17 | } 18 | 19 | onBottomNavigationTabPressed(args: TabPressedEventData): void { 20 | alert('This tab has isSelectable: false, and should be used to perform actions'); 21 | console.log(`pressed tab index: ${args.index}`); 22 | } 23 | 24 | onBottomNavigationTabSelected(args: TabSelectedEventData): void { 25 | console.log(`old tab index: ${args.oldIndex}`); 26 | console.log(`selected tab index: ${args.newIndex}`); 27 | } 28 | 29 | onBottomNavigationTabReselected(args: TabReselectedEventData): void { 30 | alert('Tab Reselected'); 31 | console.log(`reselected tab index: ${args.index}`); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/bottom-navigation-bar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialBottomNavigationBarModule } from '@nativescript-community/ui-material-bottomnavigationbar/angular'; 4 | 5 | import { BottomNavigationBarComponent } from './bottom-navigation-bar.component'; 6 | import { FirstTabComponent } from './first-tab/first-tab.component'; 7 | import { ThirdTabComponent } from './third-tab/third-tab.component'; 8 | 9 | @NgModule({ 10 | imports: [NativeScriptCommonModule, NativeScriptMaterialBottomNavigationBarModule], 11 | declarations: [BottomNavigationBarComponent, FirstTabComponent, ThirdTabComponent], 12 | schemas: [NO_ERRORS_SCHEMA] 13 | }) 14 | export class BottomNavigationBarModule {} 15 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/first-tab/first-tab.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/first-tab/first-tab.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'ns-first-tab', 6 | templateUrl: './first-tab.component.html' 7 | }) 8 | export class FirstTabComponent implements AfterViewInit { 9 | ngAfterViewInit() {} 10 | } 11 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/third-tab/third-tab.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-navigation-bar/third-tab/third-tab.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'ns-third-tab', 6 | templateUrl: './third-tab.component.html' 7 | }) 8 | export class ThirdTabComponent implements AfterViewInit { 9 | ngAfterViewInit() {} 10 | } 11 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-sheet/bottom-sheet.component.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-sheet/bottom-sheet.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewContainerRef } from '@angular/core'; 2 | import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular'; 3 | import { LoginOptionsComponent } from './login-options.component'; 4 | 5 | @Component({ 6 | selector: 'ns-bottom-sheet', 7 | templateUrl: './bottom-sheet.component.html', 8 | moduleId: module.id 9 | }) 10 | export class BottomSheetComponent implements OnInit { 11 | constructor(private bottomSheet: BottomSheetService, private containerRef: ViewContainerRef) {} 12 | 13 | ngOnInit() {} 14 | 15 | showLoginOptions() { 16 | const options: BottomSheetOptions = { 17 | viewContainerRef: this.containerRef, 18 | context: ['Facebook', 'Google', 'Twitter'] 19 | }; 20 | 21 | this.bottomSheet.show(LoginOptionsComponent, options).subscribe(result => { 22 | console.log('Option selected:', result); 23 | // We need to wait until the bottom sheet disappears before show an alert or any dialog 24 | setTimeout(() => alert(`Option selected: ${result}`), 300); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-sheet/bottom-sheet.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialBottomSheetModule } from '@nativescript-community/ui-material-bottomsheet/angular'; 4 | 5 | import { LoginOptionsComponent } from './login-options.component'; 6 | import { BottomSheetComponent } from './bottom-sheet.component'; 7 | 8 | @NgModule({ 9 | declarations: [BottomSheetComponent, LoginOptionsComponent], 10 | // entryComponents: [LoginOptionsComponent], 11 | // Recommendation: The NativeScriptMaterialBottomSheetModule should be imported in your app.module 12 | // Right now the Module doesn't work well with HMR 13 | // so if you are having troubles enable the legacy workflow in your nsconfig.json 14 | imports: [NativeScriptCommonModule, NativeScriptMaterialBottomSheetModule.forRoot()], 15 | schemas: [NO_ERRORS_SCHEMA] 16 | }) 17 | export class BottomSheetModule {} 18 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-sheet/login-options.component.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo-snippets/ng/bottom-sheet/login-options.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular'; 3 | import { ItemEventData } from '@nativescript/core/ui/list-view'; 4 | 5 | @Component({ 6 | selector: 'ns-login-options', 7 | templateUrl: 'login-options.component.html' 8 | }) 9 | export class LoginOptionsComponent implements OnInit { 10 | options: string[]; 11 | 12 | constructor(private params: BottomSheetParams) {} 13 | 14 | ngOnInit() { 15 | this.options = this.params.context; 16 | } 17 | 18 | onTap({ index }: ItemEventData) { 19 | this.params.closeCallback(this.options[index]); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /demo-snippets/ng/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { EventData } from '@nativescript/core/data/observable'; 3 | 4 | @Component({ 5 | selector: 'ns-buttons', 6 | templateUrl: './buttons.component.html', 7 | moduleId: module.id 8 | }) 9 | export class ButtonsComponent implements OnInit { 10 | ngOnInit() {} 11 | 12 | onTap(args: EventData) { 13 | console.log('Button clicked', args.eventName); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo-snippets/ng/buttons/buttons.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialButtonModule } from '@nativescript-community/ui-material-button/angular'; 4 | import { ButtonsComponent } from './buttons.component'; 5 | 6 | @NgModule({ 7 | declarations: [ButtonsComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialButtonModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class ButtonsModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/cards/cards.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ns-cards', 5 | templateUrl: './cards.component.html', 6 | moduleId: module.id 7 | }) 8 | export class CardsComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /demo-snippets/ng/cards/cards.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialCardViewModule } from '@nativescript-community/ui-material-cardview/angular'; 4 | import { CardsComponent } from './cards.component'; 5 | 6 | @NgModule({ 7 | declarations: [CardsComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialCardViewModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class CardsModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/progress/progress.component.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /demo-snippets/ng/progress/progress.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Progress } from '@nativescript-community/ui-material-progress'; 3 | 4 | @Component({ 5 | selector: 'ns-progress', 6 | templateUrl: './progress.component.html', 7 | moduleId: module.id 8 | }) 9 | export class ProgressComponent implements OnInit { 10 | public progressValue: number; 11 | 12 | ngOnInit() { 13 | this.progressValue = 25; 14 | 15 | setInterval(() => { 16 | this.progressValue += 1; 17 | }, 300); 18 | } 19 | 20 | onValueChanged(args) { 21 | let progressBar = args.object; 22 | 23 | console.log('Value changed for', progressBar); 24 | console.log('New value:', progressBar.value); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /demo-snippets/ng/progress/progress.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialProgressModule } from '@nativescript-community/ui-material-progress/angular'; 4 | import { ProgressComponent } from './progress.component'; 5 | 6 | @NgModule({ 7 | declarations: [ProgressComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialProgressModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class ProgressModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/ripple/ripple.component.html: -------------------------------------------------------------------------------- 1 | 5 | 11 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /demo-snippets/ng/ripple/ripple.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ns-ripple', 5 | templateUrl: './ripple.component.html', 6 | moduleId: module.id 7 | }) 8 | export class RippleComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /demo-snippets/ng/ripple/ripple.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialRippleModule } from '@nativescript-community/ui-material-ripple/angular'; 4 | import { RippleComponent } from './ripple.component'; 5 | 6 | @NgModule({ 7 | declarations: [RippleComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialRippleModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class RippleModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/slider/slider.component.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 11 | 14 | 20 | 23 | 28 | 29 | -------------------------------------------------------------------------------- /demo-snippets/ng/slider/slider.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ns-slider', 5 | templateUrl: './slider.component.html', 6 | moduleId: module.id 7 | }) 8 | export class SliderComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /demo-snippets/ng/slider/slider.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialSliderModule } from '@nativescript-community/ui-material-slider/angular'; 4 | import { SliderComponent } from './slider.component'; 5 | 6 | @NgModule({ 7 | declarations: [SliderComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialSliderModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class SliderModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/tabs/tabs.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo-snippets/ng/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ns-buttons', 5 | templateUrl: './tabs.component.html', 6 | moduleId: module.id 7 | }) 8 | export class TabsComponent implements OnInit { 9 | ngOnInit() { } 10 | } 11 | -------------------------------------------------------------------------------- /demo-snippets/ng/tabs/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialTabsModule } from '@nativescript-community/ui-material-tabs/angular'; 4 | import { TabsComponent } from './tabs.component'; 5 | 6 | @NgModule({ 7 | declarations: [TabsComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialTabsModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class TabsModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/ng/text-field/text-field.component.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 14 | 19 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /demo-snippets/ng/text-field/text-field.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { EventData } from '@nativescript/core/data/observable'; 3 | 4 | @Component({ 5 | selector: 'ns-text-field', 6 | templateUrl: './text-field.component.html', 7 | moduleId: module.id 8 | }) 9 | export class TextFieldComponent implements OnInit { 10 | constructor() {} 11 | 12 | ngOnInit() {} 13 | 14 | onBlur($event: EventData) { 15 | console.log('on blur', $event.eventName); 16 | } 17 | 18 | returnPress($event: EventData) { 19 | console.log('returnPress', $event.eventName); 20 | } 21 | 22 | onTextChange($event: EventData) { 23 | console.log('onTextChange', $event.eventName); 24 | } 25 | 26 | onFocus($event: EventData) { 27 | console.log('onFocus', $event.eventName); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /demo-snippets/ng/text-field/text-field.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 2 | import { NativeScriptCommonModule } from '@nativescript/angular'; 3 | import { NativeScriptMaterialTextFieldModule } from '@nativescript-community/ui-material-textfield/angular'; 4 | import { TextFieldComponent } from './text-field.component'; 5 | 6 | @NgModule({ 7 | declarations: [TextFieldComponent], 8 | imports: [NativeScriptCommonModule, NativeScriptMaterialTextFieldModule], 9 | schemas: [NO_ERRORS_SCHEMA] 10 | }) 11 | export class TextFieldModule {} 12 | -------------------------------------------------------------------------------- /demo-snippets/postinstall.js: -------------------------------------------------------------------------------- 1 | require('@nativescript/hook')(__dirname).postinstall(); 2 | //# sourceMappingURL=postinstall.js.map -------------------------------------------------------------------------------- /demo-snippets/preuninstall.js: -------------------------------------------------------------------------------- 1 | require('@nativescript/hook')(__dirname).preuninstall(); 2 | //# sourceMappingURL=preuninstall.js.map -------------------------------------------------------------------------------- /demo-snippets/scripts/after-prepare.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | function copyDir(src, dest) { 5 | return new Promise((resolve) => { 6 | fs.mkdir(dest, { recursive: true }, (error, res) => resolve(res)); 7 | }) 8 | .then( 9 | () => 10 | new Promise((resolve) => { 11 | fs.readdir(src, { withFileTypes: true }, (error, res) => resolve(res)); 12 | }) 13 | ) 14 | .then((entries) => 15 | Promise.all( 16 | entries.map((entry) => { 17 | const srcPath = path.join(src, entry.name); 18 | const destPath = path.join(dest, entry.name); 19 | 20 | return entry.isDirectory() 21 | ? copyDir(srcPath, destPath) 22 | : new Promise((resolve) => { 23 | fs.copyFile(srcPath, destPath, (error, res) => resolve(res)); 24 | }); 25 | }) 26 | ) 27 | ); 28 | } 29 | module.exports = function ($staticConfig, hookArgs) { 30 | const platform = hookArgs.prepareData.platform; 31 | const projectData = hookArgs.projectData; 32 | const dataPath = path.join(__dirname, '..', 'App_Resources', platform === 'android' ? projectData.$devicePlatformsConstants.Android : projectData.$devicePlatformsConstants.iOS); 33 | if (fs.existsSync(dataPath)) { 34 | console.log('copying demo snippets App_Resources files'); 35 | if (platform === 'android') { 36 | return copyDir(dataPath, path.join(projectData.platformsDir, platform, 'app')); 37 | } else { 38 | } 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /demo-snippets/svelte/install.ts: -------------------------------------------------------------------------------- 1 | import { install as installBottomSheet } from '@nativescript-community/ui-material-bottomsheet'; 2 | import { installMixins, themer } from '@nativescript-community/ui-material-core'; 3 | 4 | import ButtonPlugin from '@nativescript-community/ui-material-button/svelte'; 5 | import Buttons from './Buttons.svelte'; 6 | import '../app.scss'; 7 | 8 | installMixins(); 9 | installBottomSheet(); 10 | if (__IOS__) { 11 | themer.setPrimaryColor('#bff937'); 12 | themer.setPrimaryColorVariant('#33B5E5'); 13 | themer.setAccentColor('#ff8a39'); 14 | themer.setSecondaryColor('#a830d7'); 15 | } 16 | themer.createShape('cut', { 17 | cornerFamily: 'cut' as any, 18 | cornerSize: { 19 | value: 0.5, 20 | unit: '%' 21 | } 22 | }); 23 | export function installPlugin() { 24 | ButtonPlugin.register(); 25 | } 26 | 27 | export const demos = [{ name: 'Buttons', path: 'Buttons', component: Buttons }]; 28 | -------------------------------------------------------------------------------- /demo-snippets/vue/ActivityIndicators.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 48 | -------------------------------------------------------------------------------- /demo-snippets/vue/BottomSheetInnerFrame.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /demo-snippets/vue/BottomSheetInnerKeyboard.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /demo-snippets/vue/CardViews.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 50 | -------------------------------------------------------------------------------- /demo-snippets/vue/ProgressBars.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 51 | -------------------------------------------------------------------------------- /demo-snippets/vue/Ripples.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 36 | -------------------------------------------------------------------------------- /demo-snippets/vue3/ActivityIndicators.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 44 | -------------------------------------------------------------------------------- /demo-snippets/vue3/BottomSheetInnerKeyboard.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /demo-snippets/vue3/CardViews.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 40 | -------------------------------------------------------------------------------- /demo-snippets/vue3/Mixins.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 45 | -------------------------------------------------------------------------------- /demo-snippets/vue3/ProgressBars.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | -------------------------------------------------------------------------------- /demo-snippets/vue3/Ripples.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | -------------------------------------------------------------------------------- /demo-snippets/vue3/Sliders.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 49 | -------------------------------------------------------------------------------- /demo-snippets/webpack.config.svelte.js: -------------------------------------------------------------------------------- 1 | const { readFileSync } = require('fs'); 2 | 3 | const { resolve } = require('path'); 4 | function fixedFromCharCode(codePt) { 5 | if (codePt > 0xffff) { 6 | codePt -= 0x10000; 7 | return String.fromCharCode(0xd800 + (codePt >> 10), 0xdc00 + (codePt & 0x3ff)); 8 | } else { 9 | return String.fromCharCode(codePt); 10 | } 11 | } 12 | 13 | module.exports = (env, webpack) => { 14 | const platform = env && ((env.android && 'android') || (env.ios && 'ios')); 15 | webpack.chainWebpack((config) => { 16 | const symbolsParser = require('scss-symbols-parser'); 17 | const mdiSymbols = symbolsParser.parseSymbols(readFileSync(resolve(__dirname, 'node_modules/@mdi/font/scss/_variables.scss')).toString()); 18 | const mdiIcons = JSON.parse(`{${mdiSymbols.variables[mdiSymbols.variables.length - 1].value.replace(/" (F|0)(.*?)([,\n]|$)/g, '": "$1$2"$3')}}`); 19 | 20 | const scssPrepend = `$mdi-fontFamily: ${platform === 'android' ? 'materialdesignicons-webfont' : 'Material Design Icons'};`; 21 | config.module.rule('scss').use('sass-loader').options({ 22 | additionalData: scssPrepend 23 | }); 24 | config.module 25 | .rule('replace_mdi') 26 | .exclude.add(/node_modules/) 27 | .end() 28 | .test(/\.(ts|js|scss|css|vue)$/) 29 | .use('string-replace-loader') 30 | .loader(resolve(__dirname, 'node_modules/string-replace-loader')) 31 | .options({ 32 | search: 'mdi-([a-z0-9-_]+)', 33 | replace: (match, p1, offset, str) => { 34 | if (mdiIcons[p1]) { 35 | return fixedFromCharCode(parseInt(mdiIcons[p1], 16)); 36 | } 37 | return match; 38 | }, 39 | flags: 'g' 40 | }); 41 | }); 42 | }; 43 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. -------------------------------------------------------------------------------- /docs/assets/hierarchy.js: -------------------------------------------------------------------------------- 1 | window.hierarchyData = "eJy10kFrwyAYxvHv8p5NlqSJrh7LLjtvt1KKM46+TE3RN4NR8t2HyWWwhqysOQke/vx49AKh6yiC3FdFyZq6PDAI5t0aTdj5CPICVVGmwytnQMKuJ+o8MPhA34Isq0cGfbAgQVsVo4kPR68IP03UAc+U6c653iN9HXvMnCITUNnsbazkUyw/kbPApgBIoNhmqZ5NFwz0CW0bjAe5b3jBmq04DAya+qfr5WxM+4TKPpNxOxXNf4kxBVHZ/Ff5Fi8XJROCj15ezHlfkexK4DG9IE64rZgd8y4vPjPnzR+Ab+o0Jt/U17xrWf/kTCwx+yfXGXCZJAS/Rro/Z4kyDN+MUIfL" -------------------------------------------------------------------------------- /docs/assets/navigation.js: -------------------------------------------------------------------------------- 1 | window.navigationData = "eJzFmdtu4zYQht9F10nbpN3tNle1cwACdJsgNtKLRbCgpbE9WIoUSNqJUeTdC1EH60DRFKmglzY4//cPOdRQ1Ld/IwVvKrqK/mRE4R5kLDBT5zFP0x1DdYjOoniLNBHAoqtv9egdnqdEgUBCz0mscI/qgCzBmCguorMoI2obXUUpT3YU5M/fzeLfrTI/bVVKo7PoB7Ikuro0G5mVUfd9eEyJlN7wnnDbzsXll/eX9zPjhKy4UjxlZI8bopCzFfGcEoOQ06QsUVF4RokrpMUalnBgu9Qf3ZFtW/nSmIy5Dv67Dp4Tz2UxuTCI95dm2MuSrD7Oy5KsbF6WZPUoQEpIbvfA1A1R5OgFmQKxJnGAHYN+p14+fW7beQIJFGL1gY4MiBOmFh9tqQfoG7LvbbkFUCF7Wgs47eVnhNd/UG2LUlvkcXMiIaSGC/iA8Om9pIc+ZPl8ysCVKZz0ZW0FgkwqQumRvN6xWEeNBpdSbdrn34YXf6cUZ57rrmOdlnzewYxa4QIzN9BsLSsmItkjvPrlVkU7ZXdNRPLcQo3Jr0ZVMiNy5AI88+MC3HLjgoG4IylSr66rQU2R4R673EIKnm1VYwoB23ZfbEkGj4JnIBSC/17XuI6YtQUcMr4RJNseQp8yRaJdORs7OTCSYnxLYa87xsN6LUGVvhtruicCyWpUAdml26Z+vWx4gipiEhs9NQtZYJZRuOaUixnNtmQSA0Oibj6mtuBAl43SDeO2lCxE1dncHqhC4vzCQtGqbJri7mhZqCTL6OErvmFzX4/r4ZrY0Ok18CMtlrKfnwetoWOhbUA9HUsrCNiWsjADz0MaNnQQ6lEmWLeWkoWY5gOCSFrB+XCXIKF8I/1OCGWw25UFBaFudIBf+65gDSFbG/+Lb5CFdtKK2RSz9dGvN9fa3jVnSnAKYioDQ8I2M4+Cp1nwK0vloKVmwxJdsL4lXOEKFctGIfl0BFNyEdtzlLM1ijQUU8pYQDQvsFCMFrFAMr2EoZRCxfkBs6acKGSbYkFD3iVNSk6PnrsycKYDQ94zjRZM8u7vZ5ngm/z2ym9OqmineXjsocbkXqMejUxbjsXB0y/DItYpv6cOZkx2JebJQLNlJikm4HnPXcQ6ZbboYMZkVmIWBpo1M0biH953+FW0U3Y3KFOU8gmIbHUq9xuEGteWGr5HWOQBcyJmnWblgWxLnUZ6rmIXZ73CKMeE9v4e1KH9yy1/1cN9+0wNrZWce43MAPI25VmzZbTbjswH37RYo5azYtU61vWsBoX0rj5yqFUZwPcK0qmwuZYz1P/W3ww+ddnfHjzpdB8VnQ3ob49T8rXgiCbwiireem4nHeu2mTqYUXkWmIWBZstMkZXnkSuPdPseTVb56xow5b97NKwtdOJTq+fprgIZTnXtr5RKYBaG0BIumPBpq2VsuPuHxZKs5kTkA+WM4oalwBrvSeqQjeEO6HVq5pc/fr/41LwhxHx06K2kNtBSst3wlh+E71kCb5OQjYq2G99yiSaBd8V63MFnAbypNQJNPB8IVbjbUwHe1F0bNqqya1gtZKvtfC6Whwy8irlGVSqnSri2ZPp85gM2CJ7cRgxVHnbPsp26TYofvmfRoxOjrPPBNP/L/0NzFe1cX/4fmmtUJfORxaVBY2orNxReWq38/sfC0j5c6+rl/eU/TpnidQ==" -------------------------------------------------------------------------------- /images/demo-activity-indicator.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-activity-indicator.gif -------------------------------------------------------------------------------- /images/demo-bottom-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-bottom-navigation.png -------------------------------------------------------------------------------- /images/demo-bottom-sheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-bottom-sheet.png -------------------------------------------------------------------------------- /images/demo-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-button.png -------------------------------------------------------------------------------- /images/demo-cardview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-cardview.png -------------------------------------------------------------------------------- /images/demo-dialogs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-dialogs.png -------------------------------------------------------------------------------- /images/demo-floatingactionbutton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-floatingactionbutton.png -------------------------------------------------------------------------------- /images/demo-progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-progress.gif -------------------------------------------------------------------------------- /images/demo-ripple.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-ripple.gif -------------------------------------------------------------------------------- /images/demo-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-slider.png -------------------------------------------------------------------------------- /images/demo-snackbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-snackbar.png -------------------------------------------------------------------------------- /images/demo-speeddial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-speeddial.png -------------------------------------------------------------------------------- /images/demo-tabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-tabs.png -------------------------------------------------------------------------------- /images/demo-textfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-textfield.png -------------------------------------------------------------------------------- /images/demo-textview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/images/demo-textview.png -------------------------------------------------------------------------------- /info.md: -------------------------------------------------------------------------------- 1 | ## FAQ 2 | 3 | **Question:** How to use the latest version of this plugin for iOS? 4 | 5 | **Answer:** To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0 6 | To do that modify or create `App_Resources/iOS/Podfile` to add `platform :ios, '10.0'`. 7 | You can see an example in the demo-vue app. 8 | 9 | ## 10 | 11 | **Q:** How to migrate to AndroidX with this plugin installed (Android only)? 12 | 13 | **A:** For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme. 14 | Inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents``` 15 | You can see an example in the demo-vue app. 16 | 17 | ## 18 | 19 | **Q:** What is the difference between Bottom Navigation and Bottom Navigation Bar component? 20 | 21 | **A:** The _Bottom Navigation Bar_ is a new component to draw a bottom navigation bar in material design. 22 | The _Bottom Navigation_ component is a simple extract of the [eponymous component from NativeScript](https://docs.nativescript.org/ui/components/bottom-navigation), which probably will be removed in the future so this one can be used for easy transition. 23 | 24 | ## 25 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "7.2.71", 3 | "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json", 4 | "packages": [ 5 | "packages/*" 6 | ], 7 | "npmClient": "yarn", 8 | "useWorkspaces": true, 9 | "command": { 10 | "publish": { 11 | "cleanupTempFiles": true 12 | } 13 | }, 14 | "npmClientArgs": [ 15 | "--no-package-lock" 16 | ], 17 | "commitHooks": false, 18 | "createRelease": "github", 19 | "conventionalCommits": true, 20 | "private": false, 21 | "message": "chore(release): publish new version %v", 22 | "changelogPreset": "conventional-changelog-conventionalcommits", 23 | "ignoreChanges": [ 24 | "**/__fixtures__/**", 25 | "**/__tests__/**", 26 | "**/*.md" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/activityindicator/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/activityindicator/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.progressindicator:CircularProgressIndicator" 4 | ] 5 | } -------------------------------------------------------------------------------- /packages/activityindicator/platforms/android/res/layout/ns_material_circular_progress.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | -------------------------------------------------------------------------------- /packages/activityindicator/platforms/android/res/values/materialcircularprogressstyles.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /packages/activityindicator/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/ActivityIndicator' -------------------------------------------------------------------------------- /packages/activityindicator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/activityindicator", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/activityindicator/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/activityindicator/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/bottom-navigation/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/bottom-navigation/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/BottomNavigation+Theming' -------------------------------------------------------------------------------- /packages/bottom-navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/bottom-navigation", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | "@nativescript-community/ui-material-core-tabs/*": ["packages/core-tabs/*"], 10 | } 11 | }, 12 | "include": ["../../src/bottom-navigation/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 13 | "exclude": ["../../src/bottom-navigation/angular/**"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/bottomnavigationbar/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/bottomnavigationbar/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/BottomNavigation+Theming' -------------------------------------------------------------------------------- /packages/bottomnavigationbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/bottomnavigationbar", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/bottomnavigationbar/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/bottomnavigationbar/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/bottomsheet/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/bottomsheet/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | 2 | dependencies { 3 | def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.2.1" 4 | 5 | implementation "com.google.android.material:material:$androidXMaterial" 6 | } -------------------------------------------------------------------------------- /packages/bottomsheet/platforms/android/java/com/nativescript/material/bottomsheet/BottomSheetDialog.java: -------------------------------------------------------------------------------- 1 | package com.nativescript.material.bottomsheet; 2 | 3 | import android.content.Context; 4 | import android.view.ViewGroup; 5 | import android.view.View; 6 | 7 | public class BottomSheetDialog extends com.google.android.material.bottomsheet.BottomSheetDialog { 8 | public interface BottomSheetDialogListener { 9 | boolean onBackPressed(BottomSheetDialog dialog); 10 | 11 | void onDetachedFromWindow(BottomSheetDialog dialog); 12 | } 13 | 14 | BottomSheetDialogListener listener; 15 | 16 | public BottomSheetDialog(Context context, int themeResId) { 17 | super(context, themeResId); 18 | } 19 | 20 | public void setListener(BottomSheetDialogListener listener) { 21 | this.listener = listener; 22 | } 23 | 24 | @Override 25 | public void onBackPressed() { 26 | if (listener == null || !listener.onBackPressed(this)) { 27 | super.onBackPressed(); 28 | } 29 | } 30 | 31 | public void onDetachedFromWindow() { 32 | super.onDetachedFromWindow(); 33 | if (listener != null) { 34 | listener.onDetachedFromWindow(this); 35 | } 36 | } 37 | 38 | } -------------------------------------------------------------------------------- /packages/bottomsheet/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.view:WindowManager", 4 | "android.view:WindowManager.LayoutParams", 5 | "com.google.android.material.bottomsheet:BottomSheetBehavior", 6 | "com.google.android.material.bottomsheet:BottomSheetBehavior.BottomSheetCallback" 7 | ] 8 | } -------------------------------------------------------------------------------- /packages/bottomsheet/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/BottomSheet+ShapeThemer' 2 | -------------------------------------------------------------------------------- /packages/bottomsheet/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/bottomsheet", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/bottomsheet/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/bottomsheet/angular/**"], 13 | "references": [ 14 | { 15 | //Need for tsc 16 | "path": "../../tsconfig.vue3.json" 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /packages/button/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/button/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | dependencies { 2 | def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.2.1" 3 | 4 | implementation "com.google.android.material:material:$androidXMaterial" 5 | } -------------------------------------------------------------------------------- /packages/button/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.view:LayoutInflater", 4 | "com.google.android.material.button:MaterialButton", 5 | "android.graphics.drawable:Drawable", 6 | "android.graphics.drawable:BitmapDrawable" 7 | ] 8 | } -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_flat.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_flat_icon.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_icon.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_outline.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_outline_icon.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_text.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/android/res/layout/ns_material_button_text_icon.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/button/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Buttons+Theming' -------------------------------------------------------------------------------- /packages/button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/button", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/button/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/button/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/cardview/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/cardview/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.card:MaterialCardView", 4 | "android.graphics.drawable:Drawable", 5 | "android.view:ViewOutlineProvider" 6 | ] 7 | } -------------------------------------------------------------------------------- /packages/cardview/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Cards+Theming' 2 | -------------------------------------------------------------------------------- /packages/cardview/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/cardview", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/cardview/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/cardview/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/core-tabs/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/core-tabs/README.md: -------------------------------------------------------------------------------- 1 | # Nativescript Material Core 2 | 3 | [npm-url]:https://npmjs.org/package/nativescript-material-components 4 | 5 | Core module for all Nativescript material components -------------------------------------------------------------------------------- /packages/core-tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-core-tabs", 3 | "version": "7.2.71", 4 | "description": "Material Core Tabs component", 5 | "main": "./index", 6 | "sideEffects": false, 7 | "typings": "./index.d.ts", 8 | "scripts": { 9 | "tsc": "cpy '**/*.d.ts' '../../packages/core-tabs' --cwd=../../src/core-tabs --parents && tsc -d", 10 | "tsc-win": "cpy **/*.d.ts ..\\..\\packages\\core-tabs --cwd=..\\..\\src\\core-tabs --parents && tsc -d", 11 | "build": "npm run tsc ", 12 | "build.watch": "npm run tsc -- -w", 13 | "build.win": "npm run tsc-win ", 14 | "build.all": "npm run build", 15 | "build.all.win": "npm run build.win", 16 | "clean": "rimraf ./*.d.ts ./*.js ./*.js.map android" 17 | }, 18 | "nativescript": { 19 | "platforms": { 20 | "android": "6.2.0", 21 | "ios": "6.2.0" 22 | } 23 | }, 24 | "keywords": [ 25 | "NativeScript", 26 | "JavaScript", 27 | "Android", 28 | "iOS" 29 | ], 30 | "author": { 31 | "name": "Martin Guillon", 32 | "email": "martin@akylas.fr" 33 | }, 34 | "bugs": { 35 | "url": "https://github.com/nativescript-community/ui-material-components/issues" 36 | }, 37 | "license": "Apache-2.0", 38 | "homepage": "https://github.com/nativescript-community/ui-material-components", 39 | "repository": "https://github.com/nativescript-community/ui-material-components", 40 | "readmeFilename": "README.md", 41 | "dependencies": { 42 | "@nativescript-community/ui-material-core": "^7.2.71" 43 | }, 44 | "gitHead": "65eb2d66b4128ce58b4d3e35c83a68a6f921222c" 45 | } 46 | -------------------------------------------------------------------------------- /packages/core-tabs/platforms/android/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/core-tabs/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | 2 | dependencies { 3 | def androidxViewPager2Version = project.hasProperty("androidxViewPager2Version") ? project.androidxViewPager2Version : "1.0.0" 4 | implementation "androidx.viewpager2:viewpager2:$androidxViewPager2Version" 5 | } -------------------------------------------------------------------------------- /packages/core-tabs/platforms/android/java/com/nativescript/material/core/TabItemSpec.java: -------------------------------------------------------------------------------- 1 | package com.nativescript.material.core; 2 | 3 | import android.graphics.drawable.Drawable; 4 | import android.graphics.Typeface; 5 | 6 | public class TabItemSpec { 7 | public String title; 8 | public int fontSize; 9 | public Typeface typeFace; 10 | public int iconId; 11 | public Drawable iconDrawable; 12 | public int imageHeight; 13 | public int backgroundColor; 14 | public int color; 15 | } -------------------------------------------------------------------------------- /packages/core-tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/core-tabs", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/core-tabs/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/core-tabs/scripts/**/*.ts", "../../src/core-tabs/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar 9 | *.old -------------------------------------------------------------------------------- /packages/core/README.md: -------------------------------------------------------------------------------- 1 | # Nativescript Material Core 2 | 3 | [npm-url]:https://npmjs.org/package/nativescript-material-components 4 | 5 | Core module for all Nativescript material components -------------------------------------------------------------------------------- /packages/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-core", 3 | "version": "7.2.71", 4 | "description": "Material Core component", 5 | "main": "./index", 6 | "sideEffects": false, 7 | "typings": "./index.d.ts", 8 | "scripts": { 9 | "tsc": "cpy '**/*.d.ts' '../../packages/core' --cwd=../../src/core --parents && tsc -d", 10 | "tsc-win": "cpy **/*.d.ts ..\\..\\packages\\core --cwd=..\\..\\src\\core --parents && tsc -d", 11 | "build": "npm run tsc", 12 | "build.watch": "npm run tsc -- -w", 13 | "build.win": "npm run tsc-win", 14 | "build.all": "npm run build", 15 | "build.all.win": "npm run build.win", 16 | "clean": "rimraf ./*.d.ts ./*.js ./*.js.map android" 17 | }, 18 | "nativescript": { 19 | "platforms": { 20 | "android": "6.2.0", 21 | "ios": "6.2.0" 22 | } 23 | }, 24 | "keywords": [ 25 | "NativeScript", 26 | "JavaScript", 27 | "Android", 28 | "iOS" 29 | ], 30 | "author": { 31 | "name": "Martin Guillon", 32 | "email": "martin@akylas.fr" 33 | }, 34 | "bugs": { 35 | "url": "https://github.com/nativescript-community/ui-material-components/issues" 36 | }, 37 | "license": "Apache-2.0", 38 | "homepage": "https://github.com/nativescript-community/ui-material-components", 39 | "repository": "https://github.com/nativescript-community/ui-material-components", 40 | "readmeFilename": "README.md", 41 | "gitHead": "65eb2d66b4128ce58b4d3e35c83a68a6f921222c" 42 | } 43 | -------------------------------------------------------------------------------- /packages/core/platforms/android/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/core/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | 2 | dependencies { 3 | def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.8.0" 4 | implementation "com.google.android.material:material:$androidXMaterial" 5 | 6 | def androidxViewPager2Version = project.hasProperty("androidxViewPager2Version") ? project.androidxViewPager2Version : "1.0.0" 7 | implementation "androidx.viewpager2:viewpager2:$androidxViewPager2Version" 8 | } -------------------------------------------------------------------------------- /packages/core/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.nativescript.material.core:Utils", 4 | "android.graphics:Color", 5 | "android.graphics.drawable:RippleDrawable", 6 | "android.os:Build", 7 | "android.content.res:ColorStateList", 8 | "com.google.android.material.shape:ShapeAppearanceModel", 9 | "com.google.android.material.shape:ShapeAppearanceModel.Builder", 10 | "com.google.android.material.shape:MaterialShapeDrawable", 11 | "com.google.android.material.shape:CornerTreatment", 12 | "com.google.android.material.shape:CutCornerTreatment", 13 | "com.google.android.material.shape:RelativeCornerSize", 14 | "com.google.android.material.shape:RoundedCornerTreatment", 15 | "android.content.res:TypedArray" 16 | ] 17 | } -------------------------------------------------------------------------------- /packages/core/platforms/android/res/layout/ns_material_page.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /packages/core/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/schemes/Color' 2 | pod 'MaterialComponents/Ripple' 3 | -------------------------------------------------------------------------------- /packages/core/tsconfig.hooks.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "baseUrl": "../../", 7 | "rootDir": "../../src/core", 8 | "outDir": "./", 9 | "paths": { 10 | "*": ["node_modules/*", "packages/*"] 11 | } 12 | }, 13 | "include": ["../../src/core/scripts/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 14 | "exclude": ["../../src/core/angular/**"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/core", 5 | "outDir": "./", 6 | "paths": { 7 | "*": ["node_modules/*", "packages/*"] 8 | } 9 | }, 10 | "include": ["../../src/core/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 11 | "exclude": ["../../src/core/scripts/**/*.ts", "../../src/core/angular/**"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/dialogs/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/dialogs/README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Material Dialogs 2 | 3 | Material Design's [Dialogs](https://material.io/components/dialogs) component for NativeScript. 4 | 5 | [![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-dialogs.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs) 6 | [![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-dialogs.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs) 7 | 8 | ## Contents 9 | 10 | 1. [Installation](#installation) 11 | 2. [Changelog](#changelog) 12 | 3. [FAQ](#faq) 13 | 4. [Usage](#usage) 14 | 15 | ## Installation 16 | 17 | For NativeScript 7.0+ 18 | * `tns plugin add @nativescript-community/ui-material-dialogs` 19 | 20 | ## 21 | 22 | For NativeScript 6.x 23 | * `tns plugin add nativescript-material-dialogs` 24 | 25 | ## 26 | 27 | If using ```tns-core-modules``` 28 | * `tns plugin add nativescript-material-dialogs@2.5.4` 29 | 30 | ## 31 | 32 | Be sure to run a new build after adding plugins to avoid any issues. 33 | 34 | ## [Changelog](./CHANGELOG.md) 35 | 36 | ## [FAQ](../../README.md#faq) 37 | 38 | ## Usage 39 | 40 | Uses the same API as [NativeScript Dialogs](https://docs.nativescript.org/ui/dialogs). 41 | 42 | Adds one option for `alert`: 43 | * `view` : can be a NativeScript View or a path to to XML component. The custom view will be added to the dialog. Possibilities become endless. 44 | 45 | ## 46 | 47 | ### TS 48 | 49 | ```typescript 50 | import { login, alert, prompt } from "@nativescript-community/ui-material-dialogs"; 51 | 52 | alert("Your message").then(()=> { 53 | console.log("Dialog closed!"); 54 | }); 55 | 56 | ``` 57 | -------------------------------------------------------------------------------- /packages/dialogs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-dialogs", 3 | "version": "7.2.71", 4 | "description": "Material Design Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.", 5 | "main": "./dialogs", 6 | "sideEffects": false, 7 | "typings": "./dialogs.d.ts", 8 | "scripts": { 9 | "tsc": "cpy ../../src/dialogs/dialogs.d.ts ./ && tsc -d", 10 | "tsc-win": "cpy ..\\..\\src\\dialogs\\dialogs.d.ts .\\ && tsc -d", 11 | "build": "npm run tsc", 12 | "build.win": "npm run tsc-win", 13 | "build.all": "npm run build", 14 | "build.all.win": "npm run build.win", 15 | "clean": "rimraf ./*.d.ts ./*.js ./*.js.map" 16 | }, 17 | "nativescript": { 18 | "platforms": { 19 | "android": "6.2.0", 20 | "ios": "6.2.0" 21 | } 22 | }, 23 | "keywords": [ 24 | "NativeScript", 25 | "JavaScript", 26 | "Android", 27 | "iOS", 28 | "Vue", 29 | "Angular", 30 | "preview|https://raw.githubusercontent.com/nativescript-community/ui-material-components/master/images/demo-dialogs.png" 31 | ], 32 | "author": { 33 | "name": "Martin Guillon", 34 | "email": "martin@akylas.fr" 35 | }, 36 | "bugs": { 37 | "url": "https://github.com/nativescript-community/ui-material-components/issues" 38 | }, 39 | "repository": { 40 | "type": "git", 41 | "url": "https://github.com/nativescript-community/ui-material-components/tree/master/packages/dialogs" 42 | }, 43 | "license": "Apache-2.0", 44 | "readmeFilename": "README.md", 45 | "dependencies": { 46 | "@nativescript-community/ui-material-core": "^7.2.71", 47 | "@nativescript-community/ui-material-textfield": "^7.2.71" 48 | }, 49 | "gitHead": "65eb2d66b4128ce58b4d3e35c83a68a6f921222c" 50 | } 51 | -------------------------------------------------------------------------------- /packages/dialogs/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.content:DialogInterface.OnKeyListener", 4 | "com.google.android.material.dialog:MaterialAlertDialogBuilder", 5 | "android.widget:TextView", 6 | "android.view:KeyEvent", 7 | "android.graphics.drawable:BitmapDrawable", 8 | "android.content:DialogInterface", 9 | "androidx.appcompat.app:AlertDialog", 10 | "androidx.appcompat.app:AlertDialog.Builder" 11 | ] 12 | } -------------------------------------------------------------------------------- /packages/dialogs/platforms/android/res/values/dialogsstyle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/dialogs/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Dialogs+Theming' -------------------------------------------------------------------------------- /packages/dialogs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/dialogs", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | "@nativescript-community/ui-material-textfield": ["src/textfield/textfield"], 10 | "@nativescript-community/ui-material-textfield/*": ["src/textfield/*"], 11 | } 12 | }, 13 | "include": ["../../src/dialogs/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 14 | "exclude": ["../../src/dialogs/angular/**"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/floatingactionbutton/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/floatingactionbutton/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.floatingactionbutton:ExtendedFloatingActionButton" 4 | ] 5 | } -------------------------------------------------------------------------------- /packages/floatingactionbutton/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Buttons+Theming' -------------------------------------------------------------------------------- /packages/floatingactionbutton/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/floatingactionbutton", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/floatingactionbutton/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/floatingactionbutton/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/progress/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/progress/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.progressindicator:LinearProgressIndicator", 4 | "com.google.android.material.progressindicator:BaseProgressIndicator", 5 | "android.widget:ProgressBar" 6 | ] 7 | } -------------------------------------------------------------------------------- /packages/progress/platforms/android/res/layout/ns_material_linear_progress.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /packages/progress/platforms/android/res/values/materialprogressstyles.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /packages/progress/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/ProgressView+Theming' 2 | -------------------------------------------------------------------------------- /packages/progress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/progress", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/progress/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/progress/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/ripple/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/ripple/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.graphics:Rect", 4 | "android.view:Gravity" 5 | ] 6 | } -------------------------------------------------------------------------------- /packages/ripple/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Ripple' -------------------------------------------------------------------------------- /packages/ripple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/ripple", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/ripple/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/ripple/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/slider/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/slider/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.slider:BaseSlider", 4 | "com.google.android.material.slider:Slider", 5 | "com.google.android.material.slider:LabelFormatter", 6 | "com.google.android.material.slider:BaseOnChangeListener", 7 | "com.google.android.material.slider:Slider.OnChangeListener" 8 | ] 9 | } -------------------------------------------------------------------------------- /packages/slider/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Slider+ColorThemer' -------------------------------------------------------------------------------- /packages/slider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/slider", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/slider/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/slider/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/snackbar/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/snackbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-snackbar", 3 | "version": "7.2.71", 4 | "description": "Material Design Snackbars provide brief messages about app processes at the bottom of the screen.", 5 | "main": "./snackbar", 6 | "sideEffects": false, 7 | "typings": "./snackbar.d.ts", 8 | "scripts": { 9 | "tsc": "cpy ../../src/snackbar/snackbar.d.ts ./ && tsc -d", 10 | "tsc-win": "cpy ..\\..\\src\\snackbar\\snackbar.d.ts .\\ && tsc -d", 11 | "build": "npm run tsc", 12 | "build.watch": "npm run tsc -- -w", 13 | "build.win": "npm run tsc-win", 14 | "build.all": "npm run build", 15 | "build.all.win": "npm run build.win", 16 | "clean": "rimraf ./*.d.ts ./*.js ./*.js.map" 17 | }, 18 | "nativescript": { 19 | "platforms": { 20 | "android": "6.3.1", 21 | "ios": "6.3.1" 22 | } 23 | }, 24 | "keywords": [ 25 | "NativeScript", 26 | "JavaScript", 27 | "Android", 28 | "iOS", 29 | "Vue", 30 | "Angular", 31 | "preview|https://raw.githubusercontent.com/nativescript-community/ui-material-components/master/images/demo-snackbar.png" 32 | ], 33 | "author": { 34 | "name": "Martin Guillon", 35 | "email": "martin@akylas.fr" 36 | }, 37 | "bugs": { 38 | "url": "https://github.com/nativescript-community/ui-material-components/issues" 39 | }, 40 | "license": "Apache-2.0", 41 | "repository": { 42 | "type": "git", 43 | "url": "https://github.com/nativescript-community/ui-material-components/tree/master/packages/snackbar" 44 | }, 45 | "readmeFilename": "README.md", 46 | "dependencies": { 47 | "@nativescript-community/ui-material-core": "^7.2.71" 48 | }, 49 | "gitHead": "65eb2d66b4128ce58b4d3e35c83a68a6f921222c" 50 | } 51 | -------------------------------------------------------------------------------- /packages/snackbar/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | 2 | dependencies { 3 | def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.2.1" 4 | 5 | implementation "com.google.android.material:material:$androidXMaterial" 6 | } -------------------------------------------------------------------------------- /packages/snackbar/platforms/android/java/com/nativescript/material/snackbar/SnackCallback.java: -------------------------------------------------------------------------------- 1 | package com.nativescript.material.snackbar; 2 | 3 | import android.content.Context; 4 | import com.google.android.material.snackbar.Snackbar; 5 | 6 | public class SnackCallback extends 7 | com.google.android.material.snackbar.BaseTransientBottomBar.BaseCallback { 8 | public interface SnackCallbackListener { 9 | public void onDismissed(Snackbar snackbar, int event); 10 | 11 | public void onShown(Snackbar snackbar); 12 | } 13 | 14 | SnackCallbackListener listener; 15 | 16 | public SnackCallback() { 17 | super(); 18 | } 19 | 20 | public void setListener(SnackCallbackListener listener) { 21 | this.listener = listener; 22 | } 23 | 24 | @Override 25 | public void onDismissed(Snackbar snackbar, int event) { 26 | if (listener != null) { 27 | listener.onDismissed(snackbar, event); 28 | } 29 | } 30 | 31 | @Override 32 | public void onShown(Snackbar snackbar) { 33 | if (listener != null) { 34 | listener.onShown(snackbar); 35 | } 36 | } 37 | 38 | } -------------------------------------------------------------------------------- /packages/snackbar/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.snackbar:BaseTransientBottomBar", 4 | "com.google.android.material.snackbar:BaseTransientBottomBar.BaseCallback", 5 | "androidx.coordinatorlayout.widget:CoordinatorLayout", 6 | "android.widget:FrameLayout.LayoutParams", 7 | "android.view:Gravity", 8 | "android.view:ViewGroup.LayoutParams", 9 | "com.google.android.material.snackbar:Snackbar", 10 | "android.view:View.OnClickListener", 11 | "com.nativescript.material.snackbar:SnackCallback", 12 | "com.nativescript.material.snackbar:SnackCallback.SnackCallbackListener" 13 | ] 14 | } -------------------------------------------------------------------------------- /packages/snackbar/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/Snackbar' -------------------------------------------------------------------------------- /packages/snackbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/snackbar", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/snackbar/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/snackbar/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/speeddial/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/speeddial/README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Material Speed dial 2 | 3 | Material Design's [Speed dial](https://material.io/components/buttons-floating-action-button#types-of-transitions) component for NativeScript. 4 | 5 | [![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-speeddial.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial) 6 | [![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-speeddial.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial) 7 | 8 | ## Contents 9 | 10 | 1. [Installation](#installation) 11 | 2. [Changelog](#changelog) 12 | 3. [FAQ](#faq) 13 | 4. [Usage](#usage) 14 | 15 | ## Installation 16 | 17 | ```bash 18 | ns plugin add @nativescript-community/ui-material-speeddial 19 | ``` 20 | 21 | Be sure to run a new build after adding plugins to avoid any issues. 22 | 23 | ## [Changelog](./CHANGELOG.md) 24 | 25 | ## [FAQ](../../README.md#faq) 26 | 27 | ## Usage 28 | 29 | ### NativeScript + Vue 30 | 31 | ```javascript 32 | import Vue from 'nativescript-vue'; 33 | import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue'; 34 | 35 | Vue.use(speeddialPlugin); 36 | ``` 37 | 38 | ```html 39 | 40 | 41 | 42 | 43 | 44 | 45 | ``` 46 | -------------------------------------------------------------------------------- /packages/speeddial/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/speeddial", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | "@nativescript-community/ui-material-button": ["packages/button/button"], 10 | "@nativescript-community/ui-material-button/*": ["packages/button/*"] 11 | } 12 | }, 13 | "include": ["../../src/speeddial/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 14 | "exclude": ["../../src/speeddial/angular/**"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/switch/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/switch/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "com.google.android.material.materialswitch:MaterialSwitch", 4 | "androidx.appcompat.widget:SwitchCompat" 5 | ] 6 | } -------------------------------------------------------------------------------- /packages/switch/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/ProgressView+Theming' 2 | -------------------------------------------------------------------------------- /packages/switch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/switch", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/switch/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/switch/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/tabs/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/tabs/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.os:Bundle", 4 | "android.graphics:Bitmap", 5 | "android.view:View.OnAttachStateChangeListener", 6 | "com.nativescript.material.core:TabViewPager", 7 | "com.nativescript.material.core:TabsBar", 8 | "com.nativescript.material.core:TabItemSpec" 9 | ] 10 | } -------------------------------------------------------------------------------- /packages/tabs/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/BottomNavigation+Theming' 2 | pod 'MaterialComponents/Tabs+TabBarViewTheming' -------------------------------------------------------------------------------- /packages/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/tabs", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | "@nativescript-community/ui-material-core-tabs/*": ["packages/core-tabs/*"], 10 | } 11 | }, 12 | "include": ["../../src/tabs/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 13 | "exclude": ["../../src/tabs/angular/**"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/textfield/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/textfield/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | 2 | dependencies { 3 | def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.2.1" 4 | implementation "com.google.android.material:material:$androidXMaterial" 5 | } -------------------------------------------------------------------------------- /packages/textfield/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.view:LayoutInflater", 4 | "android.widget:LinearLayout.LayoutParams", 5 | "android.view:ViewGroup", 6 | "android.text.method:DigitsKeyListener", 7 | "com.nativescript.material.textfield:TextInputLayout", 8 | "com.nativescript.material.textfield:TextInputEditText" 9 | ] 10 | } -------------------------------------------------------------------------------- /packages/textfield/platforms/android/res/layout/ns_material_text_field.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 22 | 25 | -------------------------------------------------------------------------------- /packages/textfield/platforms/android/res/layout/ns_material_text_field_filled.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 22 | 25 | -------------------------------------------------------------------------------- /packages/textfield/platforms/android/res/layout/ns_material_text_field_outline.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 22 | 25 | -------------------------------------------------------------------------------- /packages/textfield/platforms/android/res/values/textfieldstyles.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 12 | 16 | 18 | 31 | 34 | 37 | -------------------------------------------------------------------------------- /packages/textfield/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/TextControls+FilledTextFields' 2 | pod 'MaterialComponents/TextControls+UnderlinedTextFields' 3 | pod 'MaterialComponents/TextControls+OutlinedTextFields' 4 | pod 'MaterialComponents/TextControls+FilledTextFieldsTheming' 5 | pod 'MaterialComponents/TextControls+UnderlinedTextFieldsTheming' 6 | pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming' 7 | # pod 'MaterialComponents/TextFields+Theming' -------------------------------------------------------------------------------- /packages/textfield/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/textfield", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/textfield/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/textfield/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/textview/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/textview/platforms/android/include.gradle: -------------------------------------------------------------------------------- 1 | 2 | dependencies { 3 | def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.2.1" 4 | 5 | implementation "com.google.android.material:material:$androidXMaterial" 6 | } -------------------------------------------------------------------------------- /packages/textview/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "android.view:LayoutInflater", 4 | "android.widget:LinearLayout.LayoutParams", 5 | "android.view:ViewGroup", 6 | "android.text.method:DigitsKeyListener", 7 | "com.nativescript.material.textfield:TextInputLayout", 8 | "com.nativescript.material.textfield:TextViewInputEditText" 9 | ] 10 | } -------------------------------------------------------------------------------- /packages/textview/platforms/android/res/layout/ns_material_text_view.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 22 | 25 | -------------------------------------------------------------------------------- /packages/textview/platforms/android/res/layout/ns_material_text_view_filled.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 22 | 25 | -------------------------------------------------------------------------------- /packages/textview/platforms/android/res/layout/ns_material_text_view_outline.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 22 | 25 | -------------------------------------------------------------------------------- /packages/textview/platforms/android/res/values/textviewstyles.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 12 | 16 | 19 | 32 | 35 | 38 | -------------------------------------------------------------------------------- /packages/textview/platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'MaterialComponents/TextFields+Theming' 2 | 3 | pod 'MaterialComponents/TextControls+FilledTextAreas' 4 | pod 'MaterialComponents/TextControls+OutlinedTextAreas' 5 | pod 'MaterialComponents/TextControls+FilledTextAreasTheming' 6 | pod 'MaterialComponents/TextControls+OutlinedTextAreasTheming' -------------------------------------------------------------------------------- /packages/textview/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/textview", 5 | "outDir": "./", 6 | "paths": { 7 | "@nativescript-community/ui-material-core": ["packages/core/index"], 8 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 9 | } 10 | }, 11 | "include": ["../../src/textview/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/textview/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - packages/* 3 | - demo-* -------------------------------------------------------------------------------- /references.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/references.d.ts -------------------------------------------------------------------------------- /src/activityindicator/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { ActivityIndicator } from '@nativescript-community/ui-material-activityindicator'; 4 | 5 | @Directive({ selector: 'MDActivityIndicator' }) 6 | export class MaterialActivityIndicatorDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialActivityIndicatorDirective], 10 | exports: [MaterialActivityIndicatorDirective] 11 | }) 12 | export class NativeScriptMaterialActivityIndicatorModule {} 13 | 14 | registerElement('MDActivityIndicator', () => ActivityIndicator); 15 | -------------------------------------------------------------------------------- /src/activityindicator/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/activityindicator/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/activityindicator/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-activityindicator-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/activityindicator/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-activityindicator": ["packages/activityindicator/index"], 9 | "@nativescript-community/ui-material-activityindicator/*": ["packages/activityindicator/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/activityindicator/index.android.ts: -------------------------------------------------------------------------------- 1 | import { inflateLayout } from '@nativescript-community/ui-material-core/android/utils'; 2 | import { ActivityIndicatorBase, indeterminateProperty, maxValueProperty, valueProperty } from './index-common'; 3 | 4 | export class ActivityIndicator extends ActivityIndicatorBase { 5 | nativeViewProtected: com.google.android.material.progressindicator.CircularProgressIndicator; 6 | 7 | // createNativeView() { 8 | // const progressBar = new com.google.android.material.progressindicator.CircularProgressIndicator(this._context); 9 | // progressBar.setVisibility(android.view.View.INVISIBLE); 10 | // progressBar.setIndeterminate(true); 11 | // return progressBar; 12 | // } 13 | // TODO: we are not using com.google.android.material.progressindicator.CircularProgressIndicator 14 | // cause it does not measure as it did before 15 | // could be solved by subclass which would override onMeasure and try to do it again 16 | // like this https://github.com/aosp-mirror/platform_frameworks_base/blob/77ff5996acbe3cd2fde0f9eb559d3e77c3b48e3e/core/java/android/widget/ProgressBar.java#L2187 17 | createNativeView() { 18 | return inflateLayout(this._context, 'ns_material_circular_progress') as com.google.android.material.progressindicator.CircularProgressIndicator; 19 | } 20 | 21 | [valueProperty.getDefault](): number { 22 | return 0; 23 | } 24 | [valueProperty.setNative](value: number) { 25 | this.nativeViewProtected.setProgress(value); 26 | } 27 | 28 | [maxValueProperty.getDefault](): number { 29 | return 100; 30 | } 31 | [maxValueProperty.setNative](value: number) { 32 | this.nativeViewProtected.setMax(value); 33 | } 34 | 35 | [indeterminateProperty.setNative](value: boolean) { 36 | this.nativeViewProtected.setIndeterminate(value); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/activityindicator/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material ActivityIndicator component 3 | * @module @nativescript-community/ui-material-activityindicator 4 | */ 5 | 6 | import { ActivityIndicatorBase } from './index-common'; 7 | import { Progress as NSProgress } from '@nativescript/core'; 8 | import { mixin } from '@nativescript-community/ui-material-core'; 9 | 10 | export class ActivityIndicator extends mixin(ActivityIndicatorBase, NSProgress) {} 11 | -------------------------------------------------------------------------------- /src/activityindicator/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { ActivityIndicator } from '..'; 2 | let installed = false; 3 | export default { 4 | install(Vue) { 5 | if (!installed) { 6 | installed = true; 7 | Vue.registerElement('MDActivityIndicator', () => ActivityIndicator, {}); 8 | } 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /src/appbar/angular/material-components.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { AppBarComponent, appBarMeta } from './app-bar'; 4 | import { AppBarDirective } from './appbar.directive'; 5 | // Uncomment and add to NgModule imports if you need to use two-way binding 6 | // import { NativeScriptFormsModule } from "nativescript-angular/forms"; 7 | import { AppBar } from '@nativescript-community/ui-material-appbar'; 8 | import { registerElement } from '@nativescript/angular'; 9 | registerElement('AppBar', () => AppBar, appBarMeta); 10 | 11 | @NgModule({ 12 | imports: [], 13 | declarations: [AppBarComponent, AppBarDirective], 14 | exports: [AppBarComponent, AppBarDirective], 15 | providers: [] 16 | }) 17 | export class MaterialComponentsModule {} 18 | -------------------------------------------------------------------------------- /src/appbar/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/appbar/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/appbar/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-appbar-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/appbar/angular/references.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /src/appbar/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-appbar": ["packages/appbar/index"], 9 | "@nativescript-community/ui-material-appbar/*": ["packages/appbar/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/appbar/appbar-common.ts: -------------------------------------------------------------------------------- 1 | import { ActionBar, CSSType } from '@nativescript/core'; 2 | 3 | @CSSType('AppBar') 4 | export abstract class AppBarBase extends ActionBar {} 5 | -------------------------------------------------------------------------------- /src/appbar/appbar.d.ts: -------------------------------------------------------------------------------- 1 | export * from './appbar.ios'; 2 | -------------------------------------------------------------------------------- /src/bottom-navigation/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { BottomNavigation, TabContentItem, TabStrip, TabStripItem } from '@nativescript-community/ui-material-bottom-navigation'; 4 | 5 | @Directive({ selector: 'MDBottomNavigation' }) 6 | export class MaterialBottomNavigationDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialBottomNavigationDirective], 10 | exports: [MaterialBottomNavigationDirective] 11 | }) 12 | export class NativeScriptMaterialBottomNavigationModule {} 13 | 14 | registerElement('MDBottomNavigation', () => BottomNavigation); 15 | registerElement('MDTabStrip', () => TabStrip); 16 | registerElement('MDTabStripItem', () => TabStripItem); 17 | registerElement('MDTabContentItem', () => TabContentItem); 18 | -------------------------------------------------------------------------------- /src/bottom-navigation/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/bottom-navigation/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/bottom-navigation/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-bottom-navigation-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/bottom-navigation/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-bottom-navigation": ["packages/bottom-navigation/index"], 9 | "@nativescript-community/ui-material-bottom-navigation/*": ["packages/bottom-navigation/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/bottom-navigation/vue/component.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | model: { 3 | prop: 'selectedIndex', 4 | event: 'selectedIndexChange' 5 | }, 6 | 7 | render(h) { 8 | return h( 9 | 'NativeMDBottomNavigation', 10 | { 11 | on: this.$listeners, 12 | attrs: this.$attrs 13 | }, 14 | this.$slots.default 15 | ); 16 | }, 17 | 18 | methods: { 19 | registerTabStrip(tabStrip) { 20 | this.$el.setAttribute('tabStrip', tabStrip); 21 | }, 22 | registerTabContentItem(tabContentItem) { 23 | const items = this.$el.nativeView.items || []; 24 | 25 | this.$el.setAttribute('items', items.concat([tabContentItem])); 26 | } 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/bottom-navigation/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { BottomNavigation, TabContentItem, TabStrip, TabStripItem } from '../'; 2 | 3 | let installed = false; 4 | 5 | export default { 6 | install(Vue) { 7 | if (!installed) { 8 | installed = true; 9 | Vue.registerElement('MDBottomNavigation', () => BottomNavigation, { 10 | model: { 11 | prop: 'selectedIndex', 12 | event: 'selectedIndexChange' 13 | }, 14 | component: require('./component').default 15 | }); 16 | Vue.registerElement('MDTabContentItem', () => TabContentItem, {}); 17 | Vue.registerElement('MDTabStripItem', () => TabStripItem, {}); 18 | Vue.registerElement('MDTabStrip', () => TabStrip, {}); 19 | } 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/bottomnavigationbar/angular/directives.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'BottomNavigationBar' 5 | }) 6 | export class BottomNavigationBarDirective {} 7 | 8 | @Directive({ 9 | selector: 'BottomNavigationTab' 10 | }) 11 | export class BottomNavigationTabDirective {} 12 | 13 | export const DIRECTIVES = [BottomNavigationBarDirective, BottomNavigationTabDirective]; 14 | -------------------------------------------------------------------------------- /src/bottomnavigationbar/angular/index.ts: -------------------------------------------------------------------------------- 1 | export * from './module'; 2 | -------------------------------------------------------------------------------- /src/bottomnavigationbar/angular/module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { BottomNavigationBar, BottomNavigationTab } from '@nativescript-community/ui-material-bottomnavigationbar'; 4 | import { DIRECTIVES } from './directives'; 5 | export { BottomNavigationBarDirective , BottomNavigationTabDirective} from './directives'; 6 | 7 | @NgModule({ 8 | declarations: [DIRECTIVES], 9 | exports: [DIRECTIVES], 10 | }) 11 | export class NativeScriptMaterialBottomNavigationBarModule {} 12 | 13 | registerElement('BottomNavigationBar', () => BottomNavigationBar); 14 | registerElement('BottomNavigationTab', () => BottomNavigationTab); 15 | -------------------------------------------------------------------------------- /src/bottomnavigationbar/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/bottomnavigationbar/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/bottomnavigationbar/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-bottomnavigationbar-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/bottomnavigationbar/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-bottomnavigationbar": ["packages/bottomnavigationbar/bottomnavigationbar"], 9 | "@nativescript-community/ui-material-bottomnavigationbar/*": ["packages/bottomnavigationbar/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/bottomnavigationbar/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { BottomNavigationBar, BottomNavigationTab } from '../bottomnavigationbar'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDBottomNavigationBar', () => BottomNavigationBar, {}); 9 | Vue.registerElement('MDBottomNavigationTab', () => BottomNavigationTab, {}); 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/bottomsheet/angular/bottomsheet.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule } from '@angular/core'; 2 | 3 | import { BottomSheetService } from './bottomsheet.service'; 4 | import { install } from '@nativescript-community/ui-material-bottomsheet'; 5 | 6 | @NgModule() 7 | export class NativeScriptMaterialBottomSheetModule { 8 | // This flag help us to avoid problems when using the new development workflow 9 | private static initialized = false; 10 | 11 | static forRoot(): ModuleWithProviders { 12 | return { 13 | ngModule: NativeScriptMaterialBottomSheetModule, 14 | providers: [BottomSheetService], 15 | }; 16 | } 17 | 18 | public constructor() { 19 | if (!NativeScriptMaterialBottomSheetModule.initialized) { 20 | install(); 21 | NativeScriptMaterialBottomSheetModule.initialized = true; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/bottomsheet/angular/index.ts: -------------------------------------------------------------------------------- 1 | export * from './bottomsheet.module'; 2 | export * from './bottomsheet.service'; 3 | -------------------------------------------------------------------------------- /src/bottomsheet/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/bottomsheet/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/bottomsheet/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-bottomsheet-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/bottomsheet/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-bottomsheet": ["packages/bottomsheet/bottomsheet"], 9 | "@nativescript-community/ui-material-bottomsheet/*": ["packages/bottomsheet/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/button/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { Button } from '@nativescript-community/ui-material-button'; 4 | 5 | @Directive({ selector: 'MDButton' }) 6 | export class MaterialButtonDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialButtonDirective], 10 | exports: [MaterialButtonDirective] 11 | }) 12 | export class NativeScriptMaterialButtonModule {} 13 | 14 | registerElement('MDButton', () => Button); 15 | -------------------------------------------------------------------------------- /src/button/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/button/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/button/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-button-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/button/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-button": ["packages/button/button"], 9 | "@nativescript-community/ui-material-button/*": ["packages/button/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/button/button.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Button component 3 | * @module @nativescript-community/ui-material-button 4 | */ 5 | 6 | import { ButtonBase } from './button-common'; 7 | 8 | export class Button extends ButtonBase {} 9 | -------------------------------------------------------------------------------- /src/button/svelte/index.ts: -------------------------------------------------------------------------------- 1 | import { registerNativeViewElement } from 'svelte-native/dom'; 2 | import { Button } from '../button'; 3 | 4 | export default class ButtonPlugin { 5 | static register() { 6 | registerNativeViewElement('mdbutton', () => Button); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/button/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { Button } from '../button'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDButton', () => Button, {}); 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/cardview/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { CardView } from '@nativescript-community/ui-material-cardview'; 4 | 5 | @Directive({ selector: 'MDCardView' }) 6 | export class MaterialCardViewDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialCardViewDirective], 10 | exports: [MaterialCardViewDirective] 11 | }) 12 | export class NativeScriptMaterialCardViewModule {} 13 | 14 | registerElement('MDCardView', () => CardView); 15 | -------------------------------------------------------------------------------- /src/cardview/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/cardview/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/cardview/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-cardview-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/cardview/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-cardview": ["packages/cardview/cardview"], 9 | "@nativescript-community/ui-material-cardview/*": ["packages/cardview/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/cardview/cardview-common.ts: -------------------------------------------------------------------------------- 1 | import { CSSType, Color, ContentView } from '@nativescript/core'; 2 | import { cssProperty } from '@nativescript-community/ui-material-core'; 3 | 4 | @CSSType('MDCardView') 5 | export abstract class CardViewBase extends ContentView { 6 | @cssProperty elevation: number; 7 | @cssProperty dynamicElevationOffset: number; 8 | @cssProperty rippleColor: Color; 9 | @cssProperty shape: string; 10 | @cssProperty rippleColorAlpha: number; 11 | } 12 | -------------------------------------------------------------------------------- /src/cardview/cardview.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material CardView component 3 | * @module @nativescript-community/ui-material-cardview 4 | */ 5 | 6 | import { CardViewBase } from './cardview-common'; 7 | 8 | export class CardView extends CardViewBase {} 9 | -------------------------------------------------------------------------------- /src/cardview/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { CardView } from '../cardview'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDCardView', () => CardView, {}); 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/core-tabs/tab-content-item/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ContentView } from '@nativescript/core'; 2 | 3 | /** 4 | * Represents a tab navigation content entry. 5 | */ 6 | export class TabContentItem extends ContentView { 7 | /** 8 | * @private 9 | */ 10 | canBeLoaded?: boolean; 11 | 12 | public index: number; 13 | } 14 | -------------------------------------------------------------------------------- /src/core-tabs/tab-content-item/index.ios.ts: -------------------------------------------------------------------------------- 1 | // Requires 2 | import { TabContentItemBase } from './tab-content-item-common'; 3 | 4 | export * from './tab-content-item-common'; 5 | 6 | export class TabContentItem extends TabContentItemBase { 7 | // used to store native value 8 | private __controller: UIViewController; 9 | 10 | public setViewController(controller: UIViewController, nativeView: UIView) { 11 | this.__controller = controller; 12 | this.setNativeView(nativeView); 13 | } 14 | 15 | public disposeNativeView() { 16 | this.__controller = undefined; 17 | this.setNativeView(undefined); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/core-tabs/tab-content-item/tab-content-item-common.ts: -------------------------------------------------------------------------------- 1 | // Types 2 | import { AddChildFromBuilder, CSSType, ContentView, View, ViewBase } from '@nativescript/core'; 3 | import { TabContentItem as TabContentItemDefinition } from '.'; 4 | 5 | @CSSType('MDTabContentItem') 6 | export abstract class TabContentItemBase extends ContentView implements TabContentItemDefinition, AddChildFromBuilder { 7 | public index: number; 8 | public eachChild(callback: (child: View) => boolean) { 9 | if (this.content) { 10 | callback(this.content); 11 | } 12 | } 13 | 14 | public loadView(view: ViewBase): void { 15 | // Don't load items until their fragments are instantiated. 16 | if ((this as TabContentItemDefinition).canBeLoaded) { 17 | super.loadView(view); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/core/cssproperties.ts: -------------------------------------------------------------------------------- 1 | import { Color, CoreTypes, CssProperty, Style } from '@nativescript/core'; 2 | 3 | export const cssProperty = (target: Object, key: string | symbol) => { 4 | Object.defineProperty(target, key, { 5 | get() { 6 | return this.style[key]; 7 | }, 8 | set(newVal) { 9 | this.style[key] = newVal; 10 | }, 11 | enumerable: true, 12 | configurable: true 13 | }); 14 | }; 15 | export const rippleColorProperty = new CssProperty({ 16 | name: 'rippleColor', 17 | cssName: 'ripple-color', 18 | equalityComparer: Color.equals, 19 | valueConverter: (v) => new Color(v) 20 | }); 21 | rippleColorProperty.register(Style); 22 | export const rippleColorAlphaProperty = new CssProperty({ 23 | name: 'rippleColorAlpha', 24 | cssName: 'ripple-color-alpha', 25 | valueConverter: parseFloat 26 | }); 27 | rippleColorAlphaProperty.register(Style); 28 | export const elevationProperty = new CssProperty({ 29 | name: 'elevation', 30 | cssName: 'elevation', 31 | 32 | valueConverter: parseFloat 33 | }); 34 | elevationProperty.register(Style); 35 | export const dynamicElevationOffsetProperty = new CssProperty({ 36 | name: 'dynamicElevationOffset', 37 | cssName: 'dynamic-elevation-offset', 38 | 39 | valueConverter: parseFloat 40 | }); 41 | dynamicElevationOffsetProperty.register(Style); 42 | 43 | export const variantProperty = new CssProperty({ 44 | name: 'variant', 45 | cssName: 'variant' 46 | }); 47 | variantProperty.register(Style); 48 | 49 | export const shapeProperty = new CssProperty({ 50 | name: 'shape', 51 | cssName: 'shape' 52 | }); 53 | shapeProperty.register(Style); 54 | -------------------------------------------------------------------------------- /src/dialogs/dialogs-common.ts: -------------------------------------------------------------------------------- 1 | import { Color, CoreTypes, Font, ImageSource, View, ViewBase } from '@nativescript/core'; 2 | 3 | export interface MDCAlertControlerOptions { 4 | buttonFont?: Font; 5 | buttonInkColor?: Color; 6 | buttonTitleColor?: Color; 7 | cornerRadius?: number; 8 | elevation?: number; 9 | messageColor?: Color; 10 | messageFont?: Font; 11 | scrimColor?: Color; 12 | titleAlignment?: string; 13 | titleColor?: Color; 14 | titleFont?: Font; 15 | titleIcon?: ImageSource; 16 | titleIconTintColor?: Color; 17 | customTitleView?: View; 18 | view?: ViewBase | string; 19 | context?: any; 20 | dismissOnBackgroundTap?: boolean; 21 | closeCallback?: Function; 22 | shouldResolveOnAction?: (result) => boolean; 23 | iosForceClosePresentedViewController?: boolean // iOS only: if a viewController is already presenting this will close it.If set to false an error will be thrown 24 | } 25 | 26 | export function isDialogOptions(arg) { 27 | return typeof arg === 'object'; 28 | } 29 | 30 | export const showingDialogs = []; 31 | -------------------------------------------------------------------------------- /src/floatingactionbutton/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { FloatingActionButton } from '@nativescript-community/ui-material-floatingactionbutton'; 4 | 5 | @NgModule() 6 | export class NativeScriptMaterialFloatingButtonModule {} 7 | 8 | registerElement('MDFloatingActionButton', () => FloatingActionButton); 9 | -------------------------------------------------------------------------------- /src/floatingactionbutton/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/floatingactionbutton/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/floatingactionbutton/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-floatingactionbutton-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/floatingactionbutton/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-floatingactionbutton": ["packages/floatingactionbutton/floatingactionbutton"], 9 | "@nativescript-community/ui-material-floatingactionbutton/*": ["packages/floatingactionbutton/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/floatingactionbutton/floatingactionbutton.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material FloatingActionButton component 3 | * @module @nativescript-community/ui-material-floatingactionbutton 4 | */ 5 | 6 | import { FloatingActionButtonBase } from './floatingactionbutton-common'; 7 | export declare class FloatingActionButton extends FloatingActionButtonBase { 8 | show(): void; 9 | hide(): void; 10 | } 11 | -------------------------------------------------------------------------------- /src/floatingactionbutton/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { FloatingActionButton } from '../floatingactionbutton'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDFloatingActionButton', () => FloatingActionButton, {}); 9 | } 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /src/page/page.d.ts: -------------------------------------------------------------------------------- 1 | import { Page as INSPage } from '@nativescript/core'; 2 | 3 | 4 | export class Page extends INSPage { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /src/page/page.ios.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-material-components/e6076200bd06401a5e915a8dcda6fe3d90caff35/src/page/page.ios.ts -------------------------------------------------------------------------------- /src/progress/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { Progress } from '@nativescript-community/ui-material-progress'; 4 | 5 | @Directive({ selector: 'MDProgress' }) 6 | export class MaterialProgressDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialProgressDirective], 10 | exports: [MaterialProgressDirective] 11 | }) 12 | export class NativeScriptMaterialProgressModule {} 13 | 14 | registerElement('MDProgress', () => Progress); 15 | -------------------------------------------------------------------------------- /src/progress/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/progress/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/progress/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-progress-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/progress/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-progress": ["packages/progress/progress"], 9 | "@nativescript-community/ui-material-progress/*": ["packages/progress/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/progress/progress-common.ts: -------------------------------------------------------------------------------- 1 | import { cssProperty } from '@nativescript-community/ui-material-core'; 2 | import { CoreTypes, CSSType, Color, CssProperty, Length, Progress as NSProgress, Property, Style, booleanConverter } from '@nativescript/core'; 3 | 4 | @CSSType('MDProgress') 5 | export abstract class ProgressBase extends NSProgress { 6 | @cssProperty progressColor: Color; 7 | @cssProperty progressBackgroundColor: Color; 8 | public indeterminate: boolean; 9 | public busy: boolean; 10 | public startAnimating() { 11 | this.busy = true; 12 | } 13 | public stopAnimating() { 14 | this.busy = false; 15 | } 16 | } 17 | 18 | export const progressColorProperty = new CssProperty({ 19 | cssName: 'progress-color', 20 | name: 'progressColor', 21 | equalityComparer: Color.equals, 22 | valueConverter: v => new Color(v) 23 | }); 24 | export const progressBackgroundColorProperty = new CssProperty({ 25 | cssName: 'progress-background-color', 26 | name: 'progressBackgroundColor', 27 | equalityComparer: Color.equals, 28 | valueConverter: v => new Color(v) 29 | }); 30 | export const busyProperty = new Property({ 31 | name: 'busy', 32 | defaultValue: false, 33 | valueConverter: booleanConverter 34 | }); 35 | export const indeterminateProperty = new Property({ 36 | name: 'indeterminate', 37 | defaultValue: false, 38 | valueConverter: booleanConverter 39 | }); 40 | 41 | 42 | export const trackCornerRadiusProperty = new CssProperty({ 43 | name: 'trackCornerRadius', 44 | cssName: 'track-corner-radius', 45 | valueConverter: Length.parse 46 | }); 47 | trackCornerRadiusProperty.register(Style); 48 | 49 | busyProperty.register(ProgressBase); 50 | indeterminateProperty.register(ProgressBase); 51 | progressColorProperty.register(Style); 52 | progressBackgroundColorProperty.register(Style); 53 | -------------------------------------------------------------------------------- /src/progress/progress.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Progress component 3 | * @module @nativescript-community/ui-material-progress 4 | */ 5 | 6 | import { ProgressBase } from './progress-common'; 7 | 8 | export class Progress extends ProgressBase {} 9 | -------------------------------------------------------------------------------- /src/progress/progress.ios.ts: -------------------------------------------------------------------------------- 1 | import { themer } from '@nativescript-community/ui-material-core'; 2 | import { Color, Screen } from '@nativescript/core'; 3 | import { ProgressBase, busyProperty, indeterminateProperty, progressBackgroundColorProperty, progressColorProperty } from './progress-common'; 4 | 5 | export class Progress extends ProgressBase { 6 | nativeViewProtected: MDCProgressView; 7 | 8 | constructor() { 9 | super(); 10 | this.effectiveMinHeight = 2 * Screen.mainScreen.scale; 11 | } 12 | 13 | public createNativeView() { 14 | const result = MDCProgressView.new(); 15 | const scheme = MDCContainerScheme.new(); 16 | scheme.colorScheme = themer.getAppColorScheme(); 17 | result.applyThemeWithScheme(scheme); 18 | return result; 19 | } 20 | 21 | [progressColorProperty.setNative](color: Color) { 22 | this.nativeViewProtected.progressTintColor = color ? color.ios : null; 23 | } 24 | 25 | [progressBackgroundColorProperty.setNative](color: Color) { 26 | this.nativeViewProtected.trackTintColor = color ? color.ios : null; 27 | } 28 | [indeterminateProperty.setNative](value: boolean) { 29 | this.nativeViewProtected.mode = value ? MDCProgressViewMode.Indeterminate : MDCProgressViewMode.Determinate; 30 | if (this.busy) { 31 | this.nativeViewProtected.startAnimating(); 32 | } 33 | } 34 | [busyProperty.setNative](value) { 35 | const nativeView = this.nativeViewProtected; 36 | if (nativeView.mode === MDCProgressViewMode.Determinate) { 37 | return; 38 | } 39 | if (value) { 40 | nativeView.startAnimating(); 41 | } else { 42 | nativeView.stopAnimating(); 43 | } 44 | // if (nativeView.hidesWhenStopped) { 45 | // this.requestLayout(); 46 | // } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/progress/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { Progress } from '../progress'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDProgress', () => Progress, {}); 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/references.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | interface MDCAlertController { 6 | alertView: MDCAlertControllerView; 7 | mdc_dialogPresentationController: MDCDialogPresentationController; 8 | } 9 | interface MDCAlertControllerView extends UIView { 10 | customContentView: UIView; 11 | calculateContentSizeThatFitsWidth(width: number): CGSize; 12 | } 13 | -------------------------------------------------------------------------------- /src/ripple/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { Ripple } from '@nativescript-community/ui-material-ripple'; 4 | 5 | @Directive({ selector: 'MDRipple' }) 6 | export class MaterialRippleDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialRippleDirective], 10 | exports: [MaterialRippleDirective], 11 | }) 12 | export class NativeScriptMaterialRippleModule {} 13 | 14 | registerElement('MDRipple', () => Ripple); 15 | -------------------------------------------------------------------------------- /src/ripple/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/ripple/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/ripple/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-ripple-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/ripple/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-ripple": ["packages/ripple/ripple"], 9 | "@nativescript-community/ui-material-ripple/*": ["packages/ripple/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/ripple/ripple-common.ts: -------------------------------------------------------------------------------- 1 | import { CSSType, Color, StackLayout } from '@nativescript/core'; 2 | import { cssProperty } from '@nativescript-community/ui-material-core'; 3 | 4 | @CSSType('MDRipple') 5 | export abstract class RippleBase extends StackLayout { 6 | @cssProperty rippleColor: Color; 7 | } 8 | -------------------------------------------------------------------------------- /src/ripple/ripple.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Ripple component 3 | * @module @nativescript-community/ui-material-ripple 4 | */ 5 | 6 | import { RippleBase } from './ripple-common'; 7 | 8 | export class Ripple extends RippleBase {} 9 | -------------------------------------------------------------------------------- /src/ripple/ripple.ios.ts: -------------------------------------------------------------------------------- 1 | import { getRippleColor, rippleColorAlphaProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core'; 2 | import { Color } from '@nativescript/core'; 3 | import { RippleBase } from './ripple-common'; 4 | 5 | export class Ripple extends RippleBase { 6 | inkTouchController: MDCRippleTouchController; 7 | public createNativeView() { 8 | const view = UIView.alloc().init(); 9 | this.inkTouchController = MDCRippleTouchController.alloc().initWithView(view); 10 | 11 | const colorScheme = themer.getAppColorScheme() as MDCSemanticColorScheme; 12 | if (colorScheme && colorScheme.primaryColor) { 13 | this.inkTouchController.rippleView.rippleColor =colorScheme.primaryColor.colorWithAlphaComponent(0.24); 14 | } 15 | // this.inkTouchController 16 | // MDCInkColorThemer.applyColorSchemeToInkView(colorScheme, this.inkTouchController.defaultInkView); 17 | return view; 18 | } 19 | [rippleColorProperty.setNative](color: Color) { 20 | this.inkTouchController.rippleView.rippleColor = getRippleColor(color, this.rippleColorAlpha); 21 | } 22 | [rippleColorAlphaProperty.setNative](value: number) { 23 | if (this.rippleColor) { 24 | this[rippleColorProperty.setNative](this.rippleColor); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/ripple/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { Ripple } from '../ripple'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDRipple', () => Ripple, {}); 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/slider/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { Slider } from '@nativescript-community/ui-material-slider'; 4 | 5 | @Directive({ selector: 'MDSlider' }) 6 | export class MaterialSliderDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialSliderDirective], 10 | exports: [MaterialSliderDirective] 11 | }) 12 | export class NativeScriptMaterialSliderModule {} 13 | 14 | registerElement('MDSlider', () => Slider); 15 | -------------------------------------------------------------------------------- /src/slider/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/slider/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/slider/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-slider-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/slider/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-slider": ["packages/slider/slider"], 9 | "@nativescript-community/ui-material-slider/*": ["packages/slider/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/slider/cssproperties.ts: -------------------------------------------------------------------------------- 1 | import { Color, CssProperty, Style, booleanConverter } from '@nativescript/core'; 2 | export function colorConverter(v: string | Color): Color { 3 | if (!v || v instanceof Color) { 4 | return v as Color; 5 | } 6 | return new Color(v); 7 | } 8 | 9 | export const trackBackgroundColorProperty = new CssProperty({ 10 | name: 'trackBackgroundColor', 11 | cssName: 'track-background-color', 12 | equalityComparer: Color.equals, 13 | valueConverter: colorConverter 14 | }); 15 | trackBackgroundColorProperty.register(Style); 16 | export const thumbColorProperty = new CssProperty({ 17 | cssName: 'thumb-color', 18 | name: 'thumbColor', 19 | equalityComparer: Color.equals, 20 | valueConverter: colorConverter 21 | }); 22 | thumbColorProperty.register(Style); 23 | 24 | export const trackFillColorProperty = new CssProperty({ 25 | cssName: 'track-fill-color', 26 | name: 'trackFillColor', 27 | equalityComparer: Color.equals, 28 | valueConverter: colorConverter 29 | }); 30 | trackFillColorProperty.register(Style); 31 | export const thumbHollowAtStartProperty = new CssProperty({ 32 | cssName: 'thumb-hollow-at-start', 33 | name: 'thumbHollowAtStart', 34 | valueConverter: booleanConverter 35 | }); 36 | thumbHollowAtStartProperty.register(Style); 37 | 38 | export const stepSizeProperty = new CssProperty({ 39 | name: 'stepSize', 40 | cssName: 'step-size', 41 | defaultValue: 0, 42 | valueConverter: parseFloat 43 | }); 44 | stepSizeProperty.register(Style); 45 | -------------------------------------------------------------------------------- /src/slider/slider-common.ts: -------------------------------------------------------------------------------- 1 | import { CSSType, Color, Slider as NSSlider } from '@nativescript/core'; 2 | import { cssProperty } from '@nativescript-community/ui-material-core'; 3 | 4 | @CSSType('MDSlider') 5 | export abstract class SliderBase extends NSSlider { 6 | @cssProperty rippleColor: Color; 7 | @cssProperty trackBackgroundColor: Color; 8 | @cssProperty trackFillColor: Color; 9 | @cssProperty thumbColor: Color; 10 | @cssProperty elevation: number; 11 | @cssProperty stepSize: number; 12 | } 13 | -------------------------------------------------------------------------------- /src/slider/slider.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Slider component 3 | * @module @nativescript-community/ui-material-slider 4 | */ 5 | 6 | import { SliderBase } from './slider-common'; 7 | 8 | export class Slider extends SliderBase {} 9 | -------------------------------------------------------------------------------- /src/slider/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { Slider } from '../slider'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDSlider', () => Slider, { 9 | model: { 10 | prop: 'value', 11 | event: 'valueChange' 12 | } 13 | }); 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/speeddial/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { SpeedDial, SpeedDialItem } from '@nativescript-community/ui-material-speeddial'; 4 | 5 | @NgModule() 6 | export class NativeScriptSpeedDialModule {} 7 | 8 | registerElement('MDSpeedDial', () => SpeedDial); 9 | registerElement('MDSpeedDialItem', () => SpeedDialItem); 10 | -------------------------------------------------------------------------------- /src/speeddial/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/speeddial/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/speeddial/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-speeddial-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/speeddial/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-speeddial": ["packages/speeddial/index"], 9 | "@nativescript-community/ui-material-speeddial/*": ["packages/speeddial/*"], 10 | "@nativescript-community/ui-material-button": ["packages/button/button"], 11 | "@nativescript-community/ui-material-button/*": ["packages/button/*"] 12 | } 13 | }, 14 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 15 | "angularCompilerOptions": { 16 | "enableIvy": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/speeddial/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { Label } from '@nativescript/core'; 2 | import { SpeedDial, SpeedDialItem } from '../index'; 3 | 4 | let installed = false; 5 | export default { 6 | install(Vue) { 7 | if (!installed) { 8 | installed = true; 9 | Vue.registerElement('MDSpeedDial', () => SpeedDial); 10 | Vue.registerElement('MDSpeedDialItem', () => SpeedDialItem); 11 | } 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /src/switch/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { Switch } from '@nativescript-community/ui-material-switch'; 4 | 5 | @Directive({ selector: 'MDSwitch' }) 6 | export class MaterialSwitchDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialSwitchDirective], 10 | exports: [MaterialSwitchDirective] 11 | }) 12 | export class NativeScriptMaterialSwitchModule {} 13 | 14 | registerElement('MDSwitch', () => Switch); 15 | -------------------------------------------------------------------------------- /src/switch/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/switch/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/switch/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-switch-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/switch/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-switch": ["packages/switch/index"], 9 | "@nativescript-community/ui-material-switch/*": ["packages/switch/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/switch/index-common.ts: -------------------------------------------------------------------------------- 1 | import { cssProperty } from '@nativescript-community/ui-material-core'; 2 | import { CSSType, Color, CssProperty, Switch as NSSwitch, Property, Style, booleanConverter } from '@nativescript/core'; 3 | 4 | @CSSType('MDSwitch') 5 | export abstract class SwitchBase extends NSSwitch { 6 | // @cssProperty progressColor: Color; 7 | // @cssProperty progressBackgroundColor: Color; 8 | // public indeterminate: boolean; 9 | // public busy: boolean; 10 | // public startAnimating() { 11 | // this.busy = true; 12 | // } 13 | // public stopAnimating() { 14 | // this.busy = false; 15 | // } 16 | } 17 | 18 | // export const progressColorProperty = new CssProperty({ 19 | // cssName: 'progress-color', 20 | // name: 'progressColor', 21 | // equalityComparer: Color.equals, 22 | // valueConverter: v => new Color(v) 23 | // }); 24 | // export const progressBackgroundColorProperty = new CssProperty({ 25 | // cssName: 'progress-background-color', 26 | // name: 'progressBackgroundColor', 27 | // equalityComparer: Color.equals, 28 | // valueConverter: v => new Color(v) 29 | // }); 30 | // export const busyProperty = new Property({ 31 | // name: 'busy', 32 | // defaultValue: false, 33 | // valueConverter: booleanConverter 34 | // }); 35 | // export const indeterminateProperty = new Property({ 36 | // name: 'indeterminate', 37 | // defaultValue: false, 38 | // valueConverter: booleanConverter 39 | // }); 40 | // busyProperty.register(ProgressBase); 41 | // indeterminateProperty.register(ProgressBase); 42 | // progressColorProperty.register(Style); 43 | // progressBackgroundColorProperty.register(Style); 44 | -------------------------------------------------------------------------------- /src/switch/index.android.ts: -------------------------------------------------------------------------------- 1 | import { checkedProperty } from '@nativescript/core/ui/switch'; 2 | import { SwitchBase } from './index-common'; 3 | 4 | export class Switch extends SwitchBase { 5 | nativeViewProtected: com.google.android.material.materialswitch.MaterialSwitch; 6 | 7 | // added in 1.7.0 8 | createNativeView() { 9 | return new com.google.android.material.materialswitch.MaterialSwitch(this._context); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/switch/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material Switch component 3 | * @module @nativescript-community/ui-material-switch 4 | */ 5 | 6 | import { SwitchBase } from './index-common'; 7 | 8 | export class Switch extends SwitchBase {} 9 | -------------------------------------------------------------------------------- /src/switch/index.ios.ts: -------------------------------------------------------------------------------- 1 | import { SwitchBase } from './index-common'; 2 | 3 | // TODO: for now iOS uses system switch 4 | export class Switch extends SwitchBase {} 5 | -------------------------------------------------------------------------------- /src/switch/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { Switch } from '..'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDSwitch', () => Switch, { 9 | model: { 10 | prop: 'checked', 11 | event: 'checkedChange', 12 | } 13 | }); 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/tabs/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { TabContentItem, TabStrip, TabStripItem, Tabs } from '@nativescript-community/ui-material-tabs'; 4 | 5 | @Directive({ selector: 'MDTabs' }) 6 | export class MaterialTabsDirective {} 7 | 8 | @NgModule({ 9 | declarations: [MaterialTabsDirective], 10 | exports: [MaterialTabsDirective] 11 | }) 12 | export class NativeScriptMaterialTabsModule {} 13 | 14 | registerElement('MDTabs', () => Tabs); 15 | registerElement('MDTabStrip', () => TabStrip); 16 | registerElement('MDTabStripItem', () => TabStripItem); 17 | registerElement('MDTabContentItem', () => TabContentItem); 18 | -------------------------------------------------------------------------------- /src/tabs/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/tabs/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/tabs/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-tabs-angular", 3 | "main": "index.js", 4 | "ngPackage": { 5 | "dest":"../../../packages/tabs/angular", 6 | "lib": { 7 | "entryFile": "index.ts" 8 | }, 9 | "allowedNonPeerDependencies": [ 10 | "." 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/tabs/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-tabs": ["packages/tabs/index"], 9 | "@nativescript-community/ui-material-tabs/*": ["packages/tabs/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/tabs/vue/component.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | model: { 3 | prop: 'selectedIndex', 4 | event: 'selectedIndexChange' 5 | }, 6 | 7 | render(h) { 8 | return h( 9 | 'NativeMDTabs', 10 | { 11 | on: this.$listeners, 12 | attrs: this.$attrs 13 | }, 14 | this.$slots.default 15 | ); 16 | }, 17 | 18 | methods: { 19 | registerTabStrip(tabStrip) { 20 | this.$el.setAttribute('tabStrip', tabStrip); 21 | }, 22 | registerTabContentItem(tabContentItem) { 23 | const items = this.$el.nativeView.items || []; 24 | 25 | this.$el.setAttribute('items', items.concat([tabContentItem])); 26 | } 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/tabs/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { TabContentItem, TabStrip, TabStripItem, Tabs } from '..'; 2 | 3 | let installed = false; 4 | 5 | export default { 6 | install(Vue) { 7 | if (!installed) { 8 | installed = true; 9 | Vue.registerElement('MDTabs', () => Tabs, { 10 | model: { 11 | prop: 'selectedIndex', 12 | event: 'selectedIndexChange' 13 | }, 14 | component: require('./component').default 15 | }); 16 | Vue.registerElement('MDTabContentItem', () => TabContentItem, {}); 17 | Vue.registerElement('MDTabStripItem', () => TabStripItem, {}); 18 | Vue.registerElement('MDTabStrip', () => TabStrip, {}); 19 | } 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/textfield/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { registerElement } from '@nativescript/angular'; 3 | import { TextField } from '@nativescript-community/ui-material-textfield'; 4 | import { TextValueAccessor } from './textvalue-accessor'; 5 | export { TextValueAccessor }; 6 | export const FORMS_DIRECTIVES = [TextValueAccessor]; 7 | 8 | @NgModule({ 9 | declarations: FORMS_DIRECTIVES, 10 | exports: FORMS_DIRECTIVES 11 | }) 12 | export class NativeScriptMaterialTextFieldModule {} 13 | 14 | registerElement('MDTextField', () => TextField); 15 | -------------------------------------------------------------------------------- /src/textfield/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/textfield/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/textfield/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-textfield-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/textfield/angular/textvalue-accessor.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, forwardRef } from '@angular/core'; 2 | import { NG_VALUE_ACCESSOR } from '@angular/forms'; 3 | import { View } from '@nativescript/core'; 4 | 5 | import { BaseValueAccessor } from '@nativescript/angular'; 6 | 7 | const TEXT_VALUE_ACCESSOR = { 8 | provide: NG_VALUE_ACCESSOR, 9 | useExisting: forwardRef(() => TextValueAccessor), 10 | multi: true, 11 | }; 12 | 13 | export type TextView = { text: string } & View; 14 | 15 | /** 16 | * The accessor for writing a text and listening to changes that is used by the 17 | * {@link NgModel} directives. 18 | * 19 | * ### Example 20 | * ``` 21 | * 22 | * ``` 23 | */ 24 | @Directive({ 25 | selector: 'MDTextField[ngModel],MDTextField[formControlName],MDTextField[formControl]', 26 | providers: [TEXT_VALUE_ACCESSOR], 27 | host: { 28 | '(blur)': 'onTouched()', 29 | '(textChange)': 'onChange($event.value)', 30 | }, 31 | }) 32 | export class TextValueAccessor extends BaseValueAccessor { 33 | // tslint:disable-line:directive-class-suffix 34 | constructor(elementRef: ElementRef) { 35 | super(elementRef.nativeElement); 36 | } 37 | 38 | writeValue(value: any): void { 39 | const normalized = super.normalizeValue(value); 40 | this.view.text = normalized; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/textfield/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-textfield": ["packages/textfield/textfield"], 9 | "@nativescript-community/ui-material-textfield/*": ["packages/textfield/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/textfield/textfield.common.ts: -------------------------------------------------------------------------------- 1 | import { CSSType, Color, TextField as NTextField } from '@nativescript/core'; 2 | import { cssProperty } from '@nativescript-community/ui-material-core'; 3 | import { VerticalTextAlignment } from '@nativescript-community/text'; 4 | 5 | @CSSType('MDTextField') 6 | export abstract class TextFieldBase extends NTextField { 7 | abstract requestFocus(); 8 | abstract clearFocus(); 9 | 10 | // those 2 are not released yet 11 | secureWithoutAutofill: boolean; 12 | closeOnReturn: boolean; 13 | 14 | @cssProperty helper: string; 15 | @cssProperty helperColor: Color; 16 | @cssProperty counterMaxLength: number; 17 | @cssProperty errorColor: Color; 18 | @cssProperty floating = true; 19 | @cssProperty placeholderColor: Color; 20 | @cssProperty variant: 'outline' | 'underline' | 'filled' | 'none' = 'filled'; 21 | @cssProperty error: string; 22 | @cssProperty strokeColor: Color; 23 | @cssProperty strokeInactiveColor: Color; 24 | @cssProperty strokeDisabledColor: Color; 25 | @cssProperty floatingColor: Color; 26 | @cssProperty floatingInactiveColor: Color; 27 | @cssProperty buttonColor: Color; 28 | @cssProperty digits: string; 29 | @cssProperty verticalTextAlignment: VerticalTextAlignment; 30 | } 31 | -------------------------------------------------------------------------------- /src/textfield/textfield.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material TextField component 3 | * @module @nativescript-community/ui-material-textfield 4 | */ 5 | 6 | import { Color, TextField as NTextField } from '@nativescript/core'; 7 | import { VerticalTextAlignment } from '@nativescript-community/text'; 8 | 9 | type PropType = TObj[TProp]; 10 | 11 | export type TextFieldProperties = Partial>; 12 | export class TextField extends NTextField { 13 | /* 14 | * nativeView 15 | * @Android : com.google.android.material.textfield.TextInputLayout 16 | * @iOS : MDCTextField 17 | */ 18 | nativeViewProtected: any; 19 | 20 | helper: string; 21 | helperColor: Color; 22 | counterMaxLength: number; 23 | errorColor: Color; 24 | floating: boolean; 25 | placeholderColor: Color; 26 | variant: string; 27 | error: string; 28 | strokeColor: Color; 29 | strokeInactiveColor: Color; 30 | strokeDisabledColor: Color; 31 | floatingColor: Color; 32 | floatingInactiveColor: Color; 33 | buttonColor: Color; 34 | digits: string; 35 | verticalTextAlignment: VerticalTextAlignment; 36 | 37 | focus(); 38 | blur(); 39 | requestFocus(); 40 | clearFocus(); 41 | setSelection(start: number, stop?: number); 42 | } 43 | 44 | export function initTextInputEditText(); // android only 45 | -------------------------------------------------------------------------------- /src/textfield/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { TextField } from '../textfield'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDTextField', () => TextField, { 9 | model: { 10 | prop: 'text', 11 | event: 'textChange' 12 | } 13 | }); 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/textview/angular/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TextValueAccessor } from './textvalue-accessor'; 3 | 4 | import { registerElement } from '@nativescript/angular'; 5 | import { TextView } from '@nativescript-community/ui-material-textview'; 6 | export { TextValueAccessor }; 7 | 8 | export const FORMS_DIRECTIVES = [TextValueAccessor]; 9 | 10 | @NgModule({ 11 | declarations: FORMS_DIRECTIVES, 12 | exports: FORMS_DIRECTIVES, 13 | }) 14 | export class NativeScriptMaterialTextViewModule {} 15 | 16 | registerElement('MDTextView', () => TextView); 17 | -------------------------------------------------------------------------------- /src/textview/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/textview/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /src/textview/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-material-textview-angular", 3 | "main": "index.js" 4 | } 5 | -------------------------------------------------------------------------------- /src/textview/angular/textvalue-accessor.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, forwardRef } from '@angular/core'; 2 | import { NG_VALUE_ACCESSOR } from '@angular/forms'; 3 | import { BaseValueAccessor } from '@nativescript/angular'; 4 | import { View } from '@nativescript/core'; 5 | 6 | 7 | const TEXT_VALUE_ACCESSOR = { 8 | provide: NG_VALUE_ACCESSOR, 9 | useExisting: forwardRef(() => TextValueAccessor), 10 | multi: true 11 | }; 12 | 13 | export type TextView = { text: string } & View; 14 | 15 | /** 16 | * The accessor for writing a text and listening to changes that is used by the 17 | * {@link NgModel} directives. 18 | * 19 | * ### Example 20 | * ``` 21 | * 22 | * ``` 23 | */ 24 | @Directive({ 25 | selector: 'MDTextView[ngModel],MDTextView[formControlName],MDTextView[formControl]', 26 | providers: [TEXT_VALUE_ACCESSOR], 27 | host: { 28 | '(blur)': 'onTouched()', 29 | '(textChange)': 'onChange($event.value)' 30 | } 31 | }) 32 | export class TextValueAccessor extends BaseValueAccessor { 33 | // tslint:disable-line:directive-class-suffix 34 | constructor(elementRef: ElementRef) { 35 | super(elementRef.nativeElement); 36 | } 37 | 38 | writeValue(value: any): void { 39 | const normalized = super.normalizeValue(value); 40 | this.view.text = normalized; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/textview/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "paths": { 6 | "@nativescript-community/ui-material-core": ["packages/core/index"], 7 | "@nativescript-community/ui-material-core/*": ["packages/core/*"], 8 | "@nativescript-community/ui-material-textview": ["packages/textview/textview"], 9 | "@nativescript-community/ui-material-textview/*": ["packages/textview/*"] 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"], 13 | "angularCompilerOptions": { 14 | "enableIvy": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/textview/textview.common.ts: -------------------------------------------------------------------------------- 1 | import { VerticalTextAlignment } from '@nativescript-community/text'; 2 | import { cssProperty } from '@nativescript-community/ui-material-core'; 3 | import { CSSType, Color, TextView as NSTextView } from '@nativescript/core'; 4 | 5 | @CSSType('MDTextView') 6 | export abstract class TextViewBase extends NSTextView { 7 | abstract requestFocus(); 8 | abstract clearFocus(); 9 | 10 | @cssProperty helper: string; 11 | @cssProperty helperColor: Color; 12 | @cssProperty counterMaxLength: number; 13 | @cssProperty errorColor: Color; 14 | @cssProperty floating: boolean; 15 | @cssProperty placeholderColor: Color; 16 | @cssProperty variant: 'outline' | 'underline' | 'filled' | 'none' = 'filled'; 17 | @cssProperty error: string; 18 | @cssProperty strokeColor: Color; 19 | @cssProperty strokeInactiveColor: Color; 20 | @cssProperty strokeDisabledColor: Color; 21 | @cssProperty floatingColor: Color; 22 | @cssProperty floatingInactiveColor: Color; 23 | @cssProperty buttonColor: Color; 24 | @cssProperty verticalTextAlignment: VerticalTextAlignment; 25 | } 26 | -------------------------------------------------------------------------------- /src/textview/textview.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Material TextView component 3 | * @module @nativescript-community/ui-material-textview 4 | */ 5 | 6 | import { Color, EditableTextBase } from '@nativescript/core'; 7 | 8 | type PropType = TObj[TProp]; 9 | 10 | export type TextViewProperties = Partial>; 11 | export class TextView extends EditableTextBase { 12 | /* 13 | * nativeView 14 | * @Android : com.google.android.material.textfield.TextInputLayout 15 | * @iOS : MDCMultilineTextField 16 | */ 17 | nativeViewProtected: any; 18 | 19 | helper: string; 20 | helperColor: Color; 21 | counterMaxLength: number; 22 | errorColor: Color; 23 | floating: boolean; 24 | placeholderColor: Color; 25 | variant: string; 26 | error: string; 27 | 28 | focus(); 29 | blur(); 30 | requestFocus(); 31 | clearFocus(); 32 | setSelection(start: number, stop?: number); 33 | } 34 | 35 | export function initTextInputEditText(); // android only 36 | -------------------------------------------------------------------------------- /src/textview/vue/index.ts: -------------------------------------------------------------------------------- 1 | import { TextView } from '../textview'; 2 | 3 | let installed = false; 4 | export default { 5 | install(Vue) { 6 | if (!installed) { 7 | installed = true; 8 | Vue.registerElement('MDTextView', () => TextView, { 9 | model: { 10 | prop: 'text', 11 | event: 'textChange' 12 | } 13 | }); 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/typings/MaterialTextField.ios.d.ts: -------------------------------------------------------------------------------- 1 | 2 | declare class TextInputControllerBase extends MDCTextInputControllerBase { 3 | 4 | static alloc(): TextInputControllerBase; // inherited from NSObject 5 | 6 | static new(): TextInputControllerBase; // inherited from NSObject 7 | } 8 | 9 | declare class TextInputControllerFilled extends MDCTextInputControllerFilled { 10 | 11 | static alloc(): TextInputControllerFilled; // inherited from NSObject 12 | 13 | static new(): TextInputControllerFilled; // inherited from NSObject 14 | } 15 | 16 | declare class TextInputControllerOutlined extends MDCTextInputControllerOutlined { 17 | 18 | static alloc(): TextInputControllerOutlined; // inherited from NSObject 19 | 20 | static new(): TextInputControllerOutlined; // inherited from NSObject 21 | } 22 | 23 | declare class TextInputControllerUnderline extends MDCTextInputControllerUnderline { 24 | 25 | static alloc(): TextInputControllerUnderline; // inherited from NSObject 26 | 27 | static new(): TextInputControllerUnderline; // inherited from NSObject 28 | } 29 | -------------------------------------------------------------------------------- /src/typings/mdc.ios.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | // const svelteNativePreprocessor = require('svelte-native-preprocessor'); 3 | 4 | module.exports = { 5 | compilerOptions: { 6 | namespace: 'foreign' 7 | }, 8 | preprocess: [ 9 | sveltePreprocess({ 10 | typescript: { 11 | compilerOptions: { 12 | target: 'es2020' 13 | } 14 | } 15 | }) 16 | // svelteNativePreprocessor() 17 | ] 18 | }; 19 | -------------------------------------------------------------------------------- /tsconfig.vue3.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tools/tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "paths": { 6 | "nativescript-vue": ["./node_modules/nativescript-vue3"] 7 | } 8 | }, 9 | "include": [ 10 | "./src/bottomsheet/vue3", 11 | "./packages/bottomsheet/vue3", 12 | "./demo-snippets/vue3" 13 | ] 14 | } --------------------------------------------------------------------------------