From e195147106a5024640e792971ba84cf521389955 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Sun, 14 Apr 2019 01:25:39 +0200
Subject: [PATCH] feat(html): floating label in item and as label

---
 README.md                              |   4 +-
 package.json                           |   8 +-
 snippets/angular/html-utils.json       | 114 ++++++++++++++++++
 snippets/{ => angular}/html.json       | 156 ++++++-------------------
 snippets/{ => angular}/typescript.json |   0
 5 files changed, 158 insertions(+), 124 deletions(-)
 create mode 100644 snippets/angular/html-utils.json
 rename snippets/{ => angular}/html.json (91%)
 rename snippets/{ => angular}/typescript.json (100%)

diff --git a/README.md b/README.md
index 6b59ea8..91d5d0f 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ Type part of a snippet, press enter, and the snippet unfolds.
 | `i-item-badge`                | `<ion-item>` w/ `<ion-badge>`                                                    |
 | `i-item-checkbox`                | `<ion-item>` w/ `<ion-checkbox>`                                                    |
 | `i-item-divider`                | `<ion-item-divider>` w/ `<ion-label>`                                                    |
+| `i-item-floating-label`                | `<ion-item>` w/ `<p>` and `<h2>` wrapped by `<ion-label>`                                                    |
 | `i-item-group`                | `<ion-item-group>` w/ `<ion-item-divider>` and `<ion-item>`                                                    |
 | `i-item-icon`                | `<ion-item>` w/ `<ion-icon>`                                                    |
 | `i-item-input`                | `<ion-item>` w/ `<ion-input>`                                                    |
@@ -94,8 +95,9 @@ Type part of a snippet, press enter, and the snippet unfolds.
 | `i-item-radio`                | `<ion-item>` w/ `<ion-radio>`                                                    |
 | `i-item-toggle`                | `<ion-item>` w/ `<ion-toggle>`                                                    |
 | `i-label`                | `<ion-label>`                                                    |
+| `i-label-floating`                | `<ion-label>` w/ `<p>` and `<h2>`                                                  |
 | `i-label-position`                | `<ion-label>` w/ position selection                                                  |
-| `i-list`                | `<ion-list>` w/ two `<ion-item>`                                                    |
+| `i-list`                | `<ion-list>`                                                   |
 | `i-list-header`                | `<ion-list-header>`                                                    |
 | `i-list-input`                | `<ion-item>` w/ two `<ion-item>`                                                    |
 | `i-menu`                | `<ion-menu>` w/ `<ion-header>` and `<ion-content>`                                                   |
diff --git a/package.json b/package.json
index 3ffa8e1..a6a8091 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,11 @@
         "snippets": [
             {
                 "language": "html",
-                "path": "./snippets/html.json"
+                "path": "./snippets/angular/html.json"
+            },
+            {
+                "language": "html",
+                "path": "./snippets/angular/html-utils.json"
             },
             {
                 "language": "scss",
@@ -42,7 +46,7 @@
             },
             {
                 "language": "typescript",
-                "path": "./snippets/typescript.json"
+                "path": "./snippets/angular/typescript.json"
             }
         ]
     },
diff --git a/snippets/angular/html-utils.json b/snippets/angular/html-utils.json
new file mode 100644
index 0000000..ffdcb3e
--- /dev/null
+++ b/snippets/angular/html-utils.json
@@ -0,0 +1,114 @@
+{
+    "click": {
+        "prefix": "i-click",
+        "body": [
+            "(click)=\"${1:onClick()}\""
+        ],
+        "description": "(click) event"
+    },
+    "color": {
+        "prefix": "i-color",
+        "body": [
+            "color=\"${1|primary,secondary,tertiary,success,warning,danger,light,medium,dark|}\""
+        ],
+        "description": "(click) event"
+    },
+    "ion-hide": {
+        "prefix": "i-hide",
+        "body": [
+            "ion-hide"
+        ],
+        "description": "CSS Utilities Hide Element Class - must be added to class"
+    },
+    "ion-hide-breakpoints": {
+        "prefix": "i-hide-breakpoints",
+        "body": [
+            "ion-hide-${1|sm,md,lg,xl|}-${2|up,down|}"
+        ],
+        "description": "CSS Utilities Hide Element with Display Breakpoints - must be added to class"
+    },
+    "ion-hide-sm": {
+        "prefix": "i-hide-sm",
+        "body": [
+            "ion-hide-sm-${1|up,down|}"
+        ],
+        "description": "CSS Utilities Hide Element sm - must be added to class. Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down)."
+    },
+    "ion-hide-md": {
+        "prefix": "i-hide-md",
+        "body": [
+            "ion-hide-md-${1|up,down|}"
+        ],
+        "description": "CSS Utilities Hide Element md - must be added to class. Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down)."
+    },
+    "ion-hide-lg": {
+        "prefix": "i-hide-lg",
+        "body": [
+            "ion-hide-lg-${1|up,down|}"
+        ],
+        "description": "CSS Utilities Hide Element lg - must be added to class. Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down)."
+    },
+    "ion-hide-xl": {
+        "prefix": "i-hide-xl",
+        "body": [
+            "ion-hide-xl-${1|up,down|}"
+        ],
+        "description": "CSS Utilities Hide Element xl - must be added to class. Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down)."
+    },
+    "ion-margin": {
+        "prefix": "i-margin",
+        "body": [
+            "ion-margin"
+        ],
+        "description": "CSS Utilities Element Margin - must be added to class"
+    },
+    "ion-margin-type": {
+        "prefix": "i-margin-type",
+        "body": [
+            "ion-margin-${1|top,start,end,bottom,vertical,horizontal|}"
+        ],
+        "description": "CSS Utilities Element Margin Type - must be added to class"
+    },
+    "ion-no-margin": {
+        "prefix": "i-no-margin",
+        "body": [
+            "ion-no-margin"
+        ],
+        "description": "CSS Utilities Element No Margin - must be added to class"
+    },
+    "ion-padding": {
+        "prefix": "i-padding",
+        "body": [
+            "ion-padding"
+        ],
+        "description": "CSS Utilities Element Padding - must be added to class"
+    },
+    "ion-padding-type": {
+        "prefix": "i-padding-type",
+        "body": [
+            "ion-padding-${1|top,start,end,bottom,vertical,horizontal|}"
+        ],
+        "description": "CSS Utilities Element Padding Type - must be added to class"
+    },
+    "ion-no-padding": {
+        "prefix": "i-no-padding",
+        "body": [
+            "ion-no-padding"
+        ],
+        "description": "CSS Utilities Element No Padding - must be added to class"
+    },
+    "scrollEvents": {
+        "prefix": "i-scrollEvents",
+        "body": [
+            "[scrollEvents]=\"${1|true,false|}\""
+        ],
+        "description": "Ionic [scrollEvents] binding for <ion-content>"
+    },
+    "slot": {
+        "prefix": "i-slot",
+        "body": [
+            "slot=\"${1|start,end,primary,secondary|}\""
+        ],
+        "description": "Ionic slot property"
+    }
+}
\ No newline at end of file
diff --git a/snippets/html.json b/snippets/angular/html.json
similarity index 91%
rename from snippets/html.json
rename to snippets/angular/html.json
index 478dc2c..38c1a0a 100644
--- a/snippets/html.json
+++ b/snippets/angular/html.json
@@ -291,8 +291,8 @@
         "prefix": "i-datetime",
         "body": [
             "<ion-item>",
-            "<ion-label>${1:Date}</ion-label>",
-            "<ion-datetime display-format=\"${2:DD.MM.YYYY} ${3:HH:mm}\"></ion-datetime>",
+            "\t<ion-label>${1:Date}</ion-label>",
+            "\t<ion-datetime display-format=\"${2:DD.MM.YYYY} ${3:HH:mm}\"></ion-datetime>",
             "</ion-item>"
         ],
         "description": "<ion-datetime>"
@@ -438,48 +438,6 @@
         ],
         "description": "<ion-header>"
     },
-    "ion-hide": {
-        "prefix": "i-hide",
-        "body": [
-            "ion-hide"
-        ],
-        "description": "CSS Utilities Hide Element Class - must be added to class"
-    },
-    "ion-hide-breakpoints": {
-        "prefix": "i-hide-breakpoints",
-        "body": [
-            "ion-hide-${1|sm,md,lg,xl|}-${2|up,down|}"
-        ],
-        "description": "CSS Utilities Hide Element with Display Breakpoints - must be added to class"
-    },
-    "ion-hide-sm": {
-        "prefix": "i-hide-sm",
-        "body": [
-            "ion-hide-sm-${1|up,down|}"
-        ],
-        "description": "CSS Utilities Hide Element sm - must be added to class. Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down)."
-    },
-    "ion-hide-md": {
-        "prefix": "i-hide-md",
-        "body": [
-            "ion-hide-md-${1|up,down|}"
-        ],
-        "description": "CSS Utilities Hide Element md - must be added to class. Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down)."
-    },
-    "ion-hide-lg": {
-        "prefix": "i-hide-lg",
-        "body": [
-            "ion-hide-lg-${1|up,down|}"
-        ],
-        "description": "CSS Utilities Hide Element lg - must be added to class. Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down)."
-    },
-    "ion-hide-xl": {
-        "prefix": "i-hide-xl",
-        "body": [
-            "ion-hide-xl-${1|up,down|}"
-        ],
-        "description": "CSS Utilities Hide Element xl - must be added to class. Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down)."
-    },
     "ion-icon": {
         "prefix": "i-icon",
         "body": [
@@ -542,6 +500,15 @@
         ],
         "description": "<ion-item> w/ <ion-avatar>"
     },
+    "ion-item-button": {
+        "prefix": "i-item-button",
+        "body": [
+            "<ion-item button>",
+            "\t<ion-label>${3:Click me}</ion-label>",
+            "</ion-item>"
+        ],
+        "description": "<ion-item> w/ <ion-avatar>"
+    },
     "ion-item-checkbox": {
         "prefix": "i-item-checkbox",
         "body": [
@@ -561,6 +528,18 @@
         ],
         "description": "<ion-item-divider> w/ <ion-label>"
     },
+    "ion-item-floating-label": {
+        "prefix": "i-item-floating-label",
+        "body": [
+            "<ion-item>",
+            "\t<ion-label>",
+            "\t\t<p>${1:Pizza}<p>",
+            "\t\t<h2>${2:Hawaii}</h2>",
+            "\t</ion-label>",
+            "</ion-item>"
+        ],
+        "description": "<ion-item> w/ <p> and <h2> wrapped by <ion-label>"
+    },
     "ion-item-group": {
         "prefix": "i-item-group",
         "body": [
@@ -688,6 +667,16 @@
         ],
         "description": "<ion-label>"
     },
+    "ion-label-floating": {
+        "prefix": "i-label-floating",
+        "body": [
+            "<ion-label>",
+            "\t<p>${1:Pizza}<p>",
+            "\t<h2>${2:Hawaii}</h2>",
+            "</ion-label>"
+        ],
+        "description": "<ion-label> w/ <p> and <h2>"
+    },
     "ion-label-position": {
         "prefix": "i-label-position",
         "body": [
@@ -699,15 +688,10 @@
         "prefix": "i-list",
         "body": [
             "<ion-list>",
-            "\t<ion-item>",
-            "\t\t<ion-label>${1:Peperoni}</ion-label>",
-            "\t</ion-item>",
-            "\t<ion-item>",
-            "\t\t<ion-label>${2:Hawaii}</ion-label>",
-            "\t</ion-item>",
+            "\t$0",
             "</ion-list>"
         ],
-        "description": "<ion-item> w/ two <ion-item>"
+        "description": "<ion-list>"
     },
     "ion-list-header": {
         "prefix": "i-list-header",
@@ -742,27 +726,6 @@
         ],
         "description": "<ion-list>"
     },
-    "ion-margin": {
-        "prefix": "i-margin",
-        "body": [
-            "ion-margin"
-        ],
-        "description": "CSS Utilities Element Margin - must be added to class"
-    },
-    "ion-margin-type": {
-        "prefix": "i-margin-type",
-        "body": [
-            "ion-margin-${1|top,start,end,bottom,vertical,horizontal|}"
-        ],
-        "description": "CSS Utilities Element Margin Type - must be added to class"
-    },
-    "ion-no-margin": {
-        "prefix": "i-no-margin",
-        "body": [
-            "ion-no-margin"
-        ],
-        "description": "CSS Utilities Element No Margin - must be added to class"
-    },
     "ion-menu": {
         "prefix": "i-menu",
         "body": [
@@ -814,27 +777,6 @@
         ],
         "description": "<ion-note>"
     },
-    "ion-padding": {
-        "prefix": "i-padding",
-        "body": [
-            "ion-padding"
-        ],
-        "description": "CSS Utilities Element Padding - must be added to class"
-    },
-    "ion-padding-type": {
-        "prefix": "i-padding-type",
-        "body": [
-            "ion-padding-${1|top,start,end,bottom,vertical,horizontal|}"
-        ],
-        "description": "CSS Utilities Element Padding Type - must be added to class"
-    },
-    "ion-no-padding": {
-        "prefix": "i-no-padding",
-        "body": [
-            "ion-no-padding"
-        ],
-        "description": "CSS Utilities Element No Padding - must be added to class"
-    },
     "ion-radio": {
         "prefix": "i-radio",
         "body": [
@@ -1250,33 +1192,5 @@
             "</ion-virtual-scroll>"
         ],
         "description": "<ion-virtual-scroll> with header function"
-    },
-    "click": {
-        "prefix": "i-click",
-        "body": [
-            "(click)=\"${1:onClick()}\""
-        ],
-        "description": "(click) event"
-    },
-    "color": {
-        "prefix": "i-color",
-        "body": [
-            "color=\"${1|primary,secondary,tertiary,success,warning,danger,light,medium,dark|}\""
-        ],
-        "description": "(click) event"
-    },
-    "scrollEvents": {
-        "prefix": "i-scrollEvents",
-        "body": [
-            "[scrollEvents]=\"${1|true,false|}\""
-        ],
-        "description": "Ionic [scrollEvents] binding for <ion-content>"
-    },
-    "slot": {
-        "prefix": "i-slot",
-        "body": [
-            "slot=\"${1|start,end,primary,secondary|}\""
-        ],
-        "description": "Ionic slot property"
     }
 }
\ No newline at end of file
diff --git a/snippets/typescript.json b/snippets/angular/typescript.json
similarity index 100%
rename from snippets/typescript.json
rename to snippets/angular/typescript.json