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": "[email protected]"
     },
+    "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": "[email protected]",
+		"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"
             }
         ]
     }
-}
+}