Initial release

Author: ElecTreeFrying

.gitignore

@@ -0,0 +1,3 @@
+snippets/cson
+.vscode-test/
+*.vsix

CHANGELOG.md

@@ -1,9 +1,5 @@
 # Change Log
 
-All notable changes to the "nativescript-angular-snippets" extension will be documented in this file.
+## v0.1.0 (2020-3-17)
 
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
-
-## [Unreleased]
-
-- Initial release
+- Initial release

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 John James G. Ermita¤o
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,65 +1,202 @@
-# nativescript-angular-snippets README
+# Nativescript: Angular HTML Snippets (vscode extension)
 
-This is the README for your extension "nativescript-angular-snippets". After writing up a brief description, we recommend including the following sections.
+**Updated for Nativescript v6.4.0 and Angular v9.0.0 release**
 
-## Features
-
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
-
-For example if there is an image subfolder under your extension project workspace:
-
-\!\[feature X\]\(images/feature-x.png\)
-
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
-
-## Requirements
-
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
-
-## Extension Settings
-
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
-
-For example:
-
-This extension contributes the following settings:
-
-* `myExtension.enable`: enable/disable this extension
-* `myExtension.thing`: set to `blah` to do something
-
-## Known Issues
-
-Calling out known issues can help limit users opening duplicate issues against your extension.
+This extension adds all HTML Nativescript UI Components, Layouts and Gestures snippets.
 
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
-
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
------------------------------------------------------------------------------------------------------------
-
-## Working with Markdown
-
-**Note:** You can author your README using Visual Studio Code.  Here are some useful editor keyboard shortcuts:
-
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
-* Toggle preview (`Shift+CMD+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
-* Press `Ctrl+Space` (Windows, Linux) or `Cmd+Space` (macOS) to see a list of Markdown snippets
-
-### For more information
-
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+## Features
 
-**Enjoy!**
+* Default syntax - Plain Nativescript tag.
+* Property syntax - Includes all properties from Angular Nativescript [documentation].
+* Complete syntax - Includes all properties, all events and documentation.
+* Layout snippets
+* Gesture snippets
+* System Icon snippets
+
+### Description
+
+|                 | snippet    | entered by user | output                     | description                              |
+| --------------- | ---------------- | --------- | -------------------------- | -----------------------------------------|
+| default         | `ns-button`      | `nsbutt`  | `<Button></Button>`        | plain                                    |
+| property (prop) | `ns-button-prop` | `nsbutpr` | with *prop                 | With all properties                      |
+| complete (comp) | `ns-button-comp` | `nsbu-c`  | with *prop, *events, *docs | All properties, events and documentation |
+| layout snippets | `ns-dock-layout-snippet-2`   | `nsdocnip2`  | [snippet 2] | Sample snippet from [site docs].         |
+| gestures        | `ns-tap`         | `nstap`   | `(tap)=""`                 | Gesture Snippets                         |
+| setting icon    | `ns-icon-stop`   | `nsicost` | `14`                       | [Setting Icon] snippets                  |
+
+For complete snippet reference and more examples [check this].
+
+### `ns-button`: In Action
+
+#### Default output
+
+``` html
+<Button></Button>
+```
+
+#### Property output
+
+``` html
+<Button text=""></Button>
+```
+
+#### Complete output
+
+``` html
+<Button
+  text="string"
+  (tap)=""
+  (loaded)=""
+  (unloaded)=""
+  (layoutChanged)="">
+</Button>
+<!--
+Properties
+NAME	TYPE	  DESCRIPTION
+text	string	Gets or sets the label of the button.
+
+Events
+NAME	        DESCRIPTION
+tap	          Emitted when the button is tapped.
+loaded	      Emitted when the view is loaded.
+unloaded	    Emitted when the view is unloaded.
+layoutChanged	Emitted when the layout bounds of a view changes due to layout processing.
+ -->
+```
+
+### `ns-dock-layout-snippet-2`: In Action
+
+``` html
+<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
+  <Label text="left" dock="left" backgroundColor="red"></Label>
+  <Label text="top" dock="top" backgroundColor="green"></Label>
+  <Label text="right" dock="right" backgroundColor="blue"></Label>
+  <Label text="bottom" dock="bottom" backgroundColor="yellow"></Label>
+</DockLayout>
+```
+
+### Demo
+
+HTML snippet `ns-text-field` in action; _default_, _property_ (prop) and _complete_ (comp) syntax demo.
+
+![nativescript-angular-html-snippet-demo](images/playback.gif "Nativescript: Angular HTML Snippets demo")
+
+### Snippets: User Interface > Layouts
+
+* ns-absolute-layout
+* ns-dock-layout
+* ns-grid-layout
+* ns-stack-layout
+* ns-wrap-layout
+* ns-flexbox-layout
+
+### Snippets: User Interface > Components
+
+* ns-actionbar
+* ns-actionbarextension
+* ns-actionitem
+* ns-navigationbutton
+* ns-activityindicator
+* ns-button
+* ns-datepicker
+* ns-formattedstring
+* ns-htmlview
+* ns-image
+* ns-label
+* ns-listpicker
+* ns-listview
+* ns-progress
+* ns-scroll-view
+* ns-search-bar
+* ns-segmented-bar
+* ns-segmented-bar-item
+* ns-slider
+* ns-switch
+* ns-bottom-navigation
+* ns-tab-strip
+* ns-tab-strip-item
+* ns-tab-content-item
+* ns-tabs
+* ns-tab-view
+* ns-tab-view-item
+* ns-text-field
+* ns-text-view
+* ns-time-picker
+* ns-web-view
+
+### Snippets: Gestures
+
+| Snippet        | Output           |
+|----------------|------------------|
+| `ns-tap`       | `(tap)=""`       |
+| `ns-doubleTap` | `(doubleTap)=""` |
+| `ns-longPress` | `(longPress)=""` |
+| `ns-swipe`     | `(swipe)=""`     |
+| `ns-pan`       | `(pan)=""`       |
+| `ns-pinch`     | `(pinch)=""`     |
+| `ns-rotation`  | `(rotation)=""`  |
+| `ns-touch`     | `(touch)=""`     |
+
+### Snippets: Setting Icons
+
+| Snippet          | Output |
+|------------------|--------|
+|`ns-icon-action`  | `9`    |
+|`ns-icon-undo`    | `21`   |
+
+#### List
+
+|	ICON	        | VALUE |	ICON        | VALUE |
+|---------------|-------|-------------|-------|
+| Done		      | 0	    |	Search      | 12    |
+| Cancel	      | 1	    |	Refresh     | 13    |
+| Edit		      | 2	    |	Stop        | 14    |
+| Save		      | 3	    |	Camera      | 15    |
+| Add		        | 4	    |	Trash       | 16    |
+| FlexibleSpace | 5	    |	Play        | 17    |
+| FixedSpace	  | 6	    |	Pause       | 18    |
+| Compose		    | 7	    |	Rewind      | 19    |
+| Reply		      | 8	    |	FastForward | 20    |
+| Action		    | 9	    |	Undo        | 21    |
+| Organize		  | 10    |	Redo        | 22    |
+| Bookmarks		  | 11    |	PageCurl    | 23    |
+
+Reference: https://docs.nativescript.org/angular/ui/action-bar#setting-icons
+
+## Installation
+
+  1. Install Visual Studio Code v1.30.0 or higher
+  1. Launch Code
+  1. From the command palette `Ctrl+Shift+P` (Windows, Linux) or `Cmd+Shift+P` (OSX)
+  1. Select Install Extensions
+  1. Choose **Nativescript: Angular HTML Snippets** by _ElecTreeFrying_
+  1. Reload Visual Studio Code
+
+## Changelog
+
+See [CHANGELOG] for more information.
+
+## Contributing
+
+* File bugs, feature requests in [GitHub Issues].
+* Leave a review on [Visual Studio Marketplace].
+
+## Related
+
+[More extensions of mine]
+
+## License
+
+MIT
+
+[Link]: https://github.com/ElecTreeFrying/nativescript-angular-html-snippets/blob/master/reference.md
+[check this]: https://github.com/ElecTreeFrying/nativescript-angular-html-snippets/blob/master/reference.md
+[documentation]: https://docs.nativescript.org/angular/start/introduction
+[Setting Icon]: https://docs.nativescript.org/angular/ui/action-bar#setting-icons
+[snippet 2]: https://docs.nativescript.org/angular/ui/layouts/layout-containers#docklayout
+[site docs]: https://docs.nativescript.org/angular/ui/layouts/layout-containers#docklayout
+
+[CHANGELOG]: https://marketplace.visualstudio.com/items/ElecTreeFrying.nativescript-angular-html-snippets/changelog
+[Github Issues]: https://github.com/ElecTreeFrying/nativescript-angular-html-snippets/issues
+[Visual Studio Marketplace]: https://marketplace.visualstudio.com/items?itemName=ElecTreeFrying.nativescript-angular-html-snippets&ssr=false#review-details
+[More extensions of mine]: https://marketplace.visualstudio.com/publishers/ElecTreeFrying

images/ns-ng.png

@@ -1,20 +1,59 @@
 {
-    "name": "nativescript-angular-snippets",
-    "displayName": "Nativescript Angular Snippets",
-    "description": "test",
-    "version": "0.0.1",
-    "engines": {
-        "vscode": "^1.43.0"
+    "name": "nativescript-angular-html-snippets",
+    "publisher": "ElecTreeFrying",
+    "author": {
+        "name": "John James Ermitaño",
+        "email": "jjgermitano@gmail.com"
     },
+    "displayName": "Nativescript: Angular HTML Snippets",
+    "description": "This extension adds all HTML Nativescript UI Components, Layouts and Gestures snippets.",
+    "version": "0.0.1",
+    "icon": "images/ns-ns.png",
     "categories": [
         "Snippets"
     ],
+    "keywords": [
+		"nativescript",
+		"snippets",
+		"anuglar",
+		"snipet"
+	],
+	"galleryBanner": {
+		"color": "#494949",
+		"theme": "dark"
+    },
+    "homepage": "https://github.com/ElecTreeFrying/nativescript-angular-html-snippets/blob/master/README.md",
+    "readme": "",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ElecTreeFrying/nativescript-angular-html-snippets.git"
+	},
+	"bugs": {
+		"email": "electreefrying.git@gmail.com",
+		"url": "https://github.com/ElecTreeFrying/nativescript-angular-html-snippets/issues"
+	},
+	"license": "MIT",
+    "engines": {
+        "vscode": "^1.43.0"
+    },
     "contributes": {
         "snippets": [
             {
                 "language": "html",
-                "path": "./snippets/snippet.json"
+                "path": "./snippets/ns-components.json"
+            },
+            {
+                "language": "html",
+                "path": "./snippets/ns-layouts.json"
+            },
+            {
+                "language": "html",
+                "path": "./snippets/ns-gestures.json"
+            },
+            {
+                "language": "html",
+                "path": "./snippets/ns-settings-icon.json"
             }
         ]
     }
-}
+}

images/playback.gif

@@ -0,0 +1,144 @@
+# Snipppet Reference
+
+## Layouts
+
+* ns-absolute-layout
+* ns-absolute-layout-1
+* ns-absolute-layout-2
+* ns-absolute-layout-comp
+* ns-dock-layout
+* ns-dock-layout-snippet-1
+* ns-dock-layout-snippet-2
+* ns-dock-layout-snippet-3
+* ns-dock-layout-snippet-4
+* ns-dock-layout-comp
+* ns-grid-layout
+* ns-grid-layout-snippet-1
+* ns-grid-layout-snippet-2
+* ns-grid-layout-snippet-3
+* ns-grid-layout-snippet-4
+* ns-grid-layout-snippet-5
+* ns-grid-layout-snippet-6
+* ns-grid-layout-comp
+* ns-stack-layout
+* ns-stack-layout-snippet-1
+* ns-stack-layout-snippet-2
+* ns-stack-layout-snippet-3
+* ns-stack-layout-snippet-4
+* ns-stack-layout-comp
+* ns-wrap-layout
+* ns-wrap-layout-snippet-1
+* ns-wrap-layout-snippet-2
+* ns-wrap-layout-snippet-3
+* ns-wrap-layout-snippet-4
+* ns-wrap-layout-comp
+* ns-flexbox-layout
+* ns-flexbox-layout-snippet-1
+* ns-flexbox-layout-snippet-2
+* ns-flexbox-layout-snippet-3
+* ns-flexbox-layout-snippet-4
+* ns-flexbox-layout-snippet-5
+* ns-flexbox-layout-snippet-6
+* ns-flexbox-layout-comp
+
+## Components
+
+* ns-actionbar
+* ns-actionbar-comp
+* ns-actionbarextension
+* ns-actionitem
+* ns-actionitem-prop
+* ns-actionitem-comp
+* ns-navigationbutton
+* ns-navigationbutton-prop
+* ns-navigationbutton-comp
+* ns-activityindicator
+* ns-activityindicator-prop
+* ns-activityindicator-comp
+* ns-button
+* ns-button-prop
+* ns-button-comp
+* ns-datepicker
+* ns-datepicker-prop
+* ns-datepicker-comp
+* ns-formattedstring
+* ns-formattedstring-comp
+* ns-htmlview
+* ns-htmlview-comp
+* ns-image
+* ns-image-comp
+* ns-label
+* ns-label-prop
+* ns-label-comp
+* ns-listpicker
+* ns-listpicker-prop
+* ns-listpicker-comp
+* ns-listview
+* ns-listview-prop
+* ns-listview-comp
+* ns-progress
+* ns-progress-comp
+* ns-scroll-view
+* ns-scroll-view-prop
+* ns-scroll-view-comp
+* ns-search-bar
+* ns-search-bar-prop
+* ns-search-bar-comp
+* ns-segmented-bar
+* ns-segmented-bar-prop
+* ns-segmented-bar-comp
+* ns-segmented-bar-item
+* ns-slider
+* ns-slider-comp
+* ns-switch
+* ns-switch-prop
+* ns-switch-comp
+* ns-bottom-navigation
+* ns-bottom-navigation-prop
+* ns-bottom-navigation-comp
+* ns-tab-strip
+* ns-tab-strip-prop
+* ns-tab-strip-comp
+* ns-tab-strip-item
+* ns-tab-strip-item-prop
+* ns-tab-strip-item-comp
+* ns-tab-content-item
+* ns-tabs
+* ns-tabs-prop
+* ns-tabs-comp
+* ns-tab-view
+* ns-tab-view-prop
+* ns-tab-view-comp
+* ns-tab-view-item
+* ns-tab-view-item-comp
+* ns-text-field
+* ns-text-field-prop
+* ns-text-field-comp
+* ns-text-view
+* ns-text-view-prop
+* ns-text-view-comp
+* ns-time-picker
+* ns-time-picker-prop
+* ns-time-picker-comp
+* ns-web-view
+* ns-web-view-prop
+* ns-web-view-comp
+
+## System Icons
+
+|	ICON	        | VALUE |	ICON        | VALUE |
+|---------------|-------|-------------|-------|
+| Done		      | 0	    |	Search      | 12    |
+| Cancel	      | 1	    |	Refresh     | 13    |
+| Edit		      | 2	    |	Stop        | 14    |
+| Save		      | 3	    |	Camera      | 15    |
+| Add		        | 4	    |	Trash       | 16    |
+| FlexibleSpace | 5	    |	Play        | 17    |
+| FixedSpace	  | 6	    |	Pause       | 18    |
+| Compose		    | 7	    |	Rewind      | 19    |
+| Reply		      | 8	    |	FastForward | 20    |
+| Action		    | 9	    |	Undo        | 21    |
+| Organize		  | 10    |	Redo        | 22    |
+| Bookmarks		  | 11    |	PageCurl    | 23    |
+
+Reference: https://docs.nativescript.org/angular/ui/action-bar#setting-icons

package.json

@@ -0,0 +1,42 @@
+{
+  "Nativescript Gesture - Tap": {
+    "prefix": "ns-tap",
+    "body": "(tap)=\"\"",
+    "description": "Action: Briefly touch the screen.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#tap"
+  },
+  "Nativescript Gesture - Double Tap": {
+    "prefix": "ns-doubleTap",
+    "body": "(doubleTap)=\"\"",
+    "description": "Action: Two taps in a quick succession.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#double-tap"
+  },
+  "Nativescript Gesture - Long Press": {
+    "prefix": "ns-longPress",
+    "body": "(longPress)=\"\"",
+    "description": "Action: Press your finger against the screen for a few moments.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#long-press"
+  },
+  "Nativescript Gesture - Swipe": {
+    "prefix": "ns-swipe",
+    "body": "(swipe)=\"\"",
+    "description": "Action: Swiftly slide your finger across the screen. Swipes are quick and affect the screen even after the finger is lifted off the screen.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#swipe"
+  },
+  "Nativescript Gesture - Pan": {
+    "prefix": "ns-pan",
+    "body": "(pan)=\"\"",
+    "description": "Action: Press your finger down and immediately start moving it around. Pans are executed more slowly and allow for more precision and the screen stops responding as soon as the finger is lifted off it.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#pan"
+  },
+  "Nativescript Gesture - Pinch": {
+    "prefix": "ns-pinch",
+    "body": "(pinch)=\"\"",
+    "description": "Action: Touch the screen using two of your fingers, then move them towards each other or away from each other.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#pinch"
+  },
+  "Nativescript Gesture - Rotation": {
+    "prefix": "ns-rotation",
+    "body": "(rotation)=\"\"",
+    "description": "Action: Touch the screen using two of your fingers, then rotate them simultaneously left or right.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#rotation"
+  },
+  "Nativescript Gesture - Touch": {
+    "prefix": "ns-touch",
+    "body": "(touch)=\"\"",
+    "description": "Action: A finger action was performed.\n\nSource: https://docs.nativescript.org/angular/ui/ng-components/gestures#touch"
+  }
+}