Added Tag Input

This commit is contained in:
Caesar2011
2017-05-18 00:09:41 +02:00
parent 05e0c1ff3d
commit 01205b16b9
9 changed files with 261 additions and 170 deletions

295
.idea/workspace.xml generated
View File

@@ -1,20 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="6120f49a-9ac6-41db-b526-7ddb25dbd802" name="Default" comment="Cleaned up repository and removed errors">
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/codeStyleSettings.xml" />
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" />
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/app.component.html" />
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/custom-input.component.ts" />
<change type="MOVED" beforePath="$PROJECT_DIR$/src/app/json-input.component.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.component.ts" />
<change type="MOVED" beforePath="$PROJECT_DIR$/src/app/json-input.module.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.module.ts" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/.gitignore" afterPath="$PROJECT_DIR$/.gitignore" />
<list default="true" id="6120f49a-9ac6-41db-b526-7ddb25dbd802" name="Default" comment="Added Tag Input">
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/tag-input.component.ts" />
<change type="MOVED" beforePath="$PROJECT_DIR$/src/app/counter-input.module.ts" afterPath="$PROJECT_DIR$/src/app/custom-input.module.ts" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/bs-config.json" afterPath="$PROJECT_DIR$/bs-config.json" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.html" afterPath="$PROJECT_DIR$/src/app/app.component.html" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.ts" afterPath="$PROJECT_DIR$/src/app/app.component.ts" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.module.ts" afterPath="$PROJECT_DIR$/src/app/app.module.ts" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/index.html" afterPath="$PROJECT_DIR$/src/index.html" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/systemjs-angular-loader.js" afterPath="$PROJECT_DIR$/src/systemjs-angular-loader.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/systemjs.config.js" afterPath="$PROJECT_DIR$/src/systemjs.config.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/counter-input.component.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.component.ts" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/custom-input.component.ts" afterPath="$PROJECT_DIR$/src/app/custom-input.component.ts" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
@@ -29,90 +25,38 @@
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file leaf-file-name="tslint.json" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/tslint.json">
<file leaf-file-name="tag-input.component.ts" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/app/tag-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="340">
<caret line="50" column="34" lean-forward="true" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
<folding />
<state relative-caret-position="-85">
<caret line="49" column="25" lean-forward="false" selection-start-line="49" selection-start-column="25" selection-end-line="49" selection-end-column="25" />
<folding>
<marker date="1495058621617" expanded="true" signature="672:733" ph="..." />
</folding>
</state>
</provider>
</entry>
</file>
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="206">
<caret line="12" column="43" lean-forward="false" selection-start-line="12" selection-start-column="43" selection-end-line="12" selection-end-column="43" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="app.component.html" pinned="false" current-in-tab="true">
<file leaf-file-name="app.component.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/app/app.component.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="20">
<caret line="1" column="40" lean-forward="false" selection-start-line="1" selection-start-column="40" selection-end-line="1" selection-end-column="40" />
<state relative-caret-position="240">
<caret line="12" column="145" lean-forward="false" selection-start-line="12" selection-start-column="145" selection-end-line="12" selection-end-column="145" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="custom-input.component.ts" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/app/custom-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="135">
<caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="app.module.ts" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="60">
<caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="app.component.ts" pinned="false" current-in-tab="false">
<file leaf-file-name="app.component.ts" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="200">
<caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
<state relative-caret-position="180">
<caret line="9" column="46" lean-forward="true" selection-start-line="9" selection-start-column="46" selection-end-line="9" selection-end-column="46" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="counter-input.module.ts" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/app/counter-input.module.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding>
<element signature="e#0#43#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file leaf-file-name="counter-input.component.ts" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="440">
<caret line="22" column="6" lean-forward="true" selection-start-line="22" selection-start-column="6" selection-end-line="22" selection-end-column="6" />
<folding>
<element signature="e#0#54#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FileTemplateManagerImpl">
@@ -148,14 +92,17 @@
<option value="$PROJECT_DIR$/src/app/json-input.module.js" />
<option value="$PROJECT_DIR$/src/systemjs.config.extras.js" />
<option value="$PROJECT_DIR$/src/app/json-input.component.ts" />
<option value="$PROJECT_DIR$/src/app/custom-input.component.ts" />
<option value="$PROJECT_DIR$/src/app/counter-input.component.ts" />
<option value="$PROJECT_DIR$/.gitignore" />
<option value="$PROJECT_DIR$/src/index.html" />
<option value="$PROJECT_DIR$/src/systemjs-angular-loader.js" />
<option value="$PROJECT_DIR$/src/systemjs.config.js" />
<option value="$PROJECT_DIR$/src/app/app.component.html" />
<option value="$PROJECT_DIR$/src/app/custom-input.module.ts" />
<option value="$PROJECT_DIR$/src/app/custom-input.component.ts" />
<option value="$PROJECT_DIR$/src/app/counter-input.component.ts" />
<option value="$PROJECT_DIR$/bs-config.json" />
<option value="$PROJECT_DIR$/src/app/app.component.ts" />
<option value="$PROJECT_DIR$/src/app/tag-input.component.ts" />
<option value="$PROJECT_DIR$/src/app/app.component.html" />
</list>
</option>
</component>
@@ -251,6 +198,9 @@
<property name="DefaultHtmlFileTemplate" value="HTML File" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/app" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src" />
@@ -368,7 +318,7 @@
<workItem from="1494972860049" duration="9000" />
<workItem from="1494972910184" duration="982000" />
<workItem from="1495045995828" duration="627000" />
<workItem from="1495046636215" duration="6824000" />
<workItem from="1495046636215" duration="12312000" />
</task>
<task id="LOCAL-00001" summary="Initial commit">
<created>1494973365190</created>
@@ -384,33 +334,39 @@
<option name="project" value="LOCAL" />
<updated>1494973873374</updated>
</task>
<option name="localTasksCounter" value="3" />
<task id="LOCAL-00003" summary="Cleaned up repository and removed errors">
<created>1495053476965</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1495053476965</updated>
</task>
<option name="localTasksCounter" value="4" />
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17264000" />
<option name="totallyTimeSpent" value="22752000" />
</component>
<component name="ToolWindowManager">
<frame x="1344" y="-11" width="1857" height="1092" extended-state="6" />
<editor active="true" />
<layout>
<window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24945416" sideWeight="0.5" order="1" side_tool="false" content_ui="combo" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
<window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="true" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32881" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="12" side_tool="false" content_ui="tabs" />
<window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32881" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="true" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
<window_info id="CSS Styles" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
<window_info id="CSS Styles" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
</layout>
@@ -427,6 +383,8 @@
<option value="$PROJECT_DIR$/src/app/app.component.js" />
<option value="$PROJECT_DIR$/src/app/custom-input.component.js" />
<option value="$PROJECT_DIR$/src/app/custom-input.component.js.map" />
<option value="$PROJECT_DIR$/src/app/tag-input.component.js" />
<option value="$PROJECT_DIR$/src/app/tag-input.component.js.map" />
</list>
</option>
</component>
@@ -440,10 +398,13 @@
<MESSAGE value="Initial commit" />
<MESSAGE value="Initial commit #2" />
<MESSAGE value="Cleaned up repository and removed errors" />
<option name="LAST_COMMIT_MESSAGE" value="Cleaned up repository and removed errors" />
<MESSAGE value="Added Tag Input" />
<option name="LAST_COMMIT_MESSAGE" value="Added Tag Input" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager />
<breakpoint-manager>
<option name="time" value="1" />
</breakpoint-manager>
<watches-manager />
</component>
<component name="editorHistoryManager">
@@ -545,7 +506,7 @@
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.component.spec.ts" />
<entry file="file://$PROJECT_DIR$/package.old.json" />
<entry file="file://$PROJECT_DIR$/src/app/counter-input.module.js">
<entry file="file://$PROJECT_DIR$/src/app/custom-input.module.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="200">
<caret line="10" column="63" lean-forward="true" selection-start-line="10" selection-start-column="63" selection-end-line="10" selection-end-column="63" />
@@ -581,7 +542,7 @@
<state relative-caret-position="80">
<caret line="4" column="37" lean-forward="false" selection-start-line="4" selection-start-column="37" selection-end-line="4" selection-end-column="37" />
<folding>
<element signature="e#0#75#0" expanded="true" />
<element signature="e#0#75#0" expanded="false" />
</folding>
</state>
</provider>
@@ -610,14 +571,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/bs-config.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="200">
@@ -626,42 +579,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="440">
<caret line="22" column="6" lean-forward="true" selection-start-line="22" selection-start-column="6" selection-end-line="22" selection-end-column="6" />
<folding>
<element signature="e#0#54#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/counter-input.module.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding>
<element signature="e#0#43#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/custom-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="135">
<caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="60">
<caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.component.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="140">
@@ -670,18 +587,10 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
<entry file="file://$PROJECT_DIR$/src/app/counter-input.module.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="200">
<caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/tslint.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="340">
<caret line="50" column="34" lean-forward="true" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
<state relative-caret-position="360">
<caret line="18" column="18" lean-forward="true" selection-start-line="18" selection-start-column="18" selection-end-line="18" selection-end-column="18" />
<folding />
</state>
</provider>
@@ -694,10 +603,80 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/tslint.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="340">
<caret line="50" column="34" lean-forward="false" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="60">
<caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/bs-config.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="140">
<caret line="7" column="21" lean-forward="false" selection-start-line="7" selection-start-column="21" selection-end-line="7" selection-end-column="21" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="975">
<caret line="49" column="0" lean-forward="true" selection-start-line="49" selection-start-column="0" selection-end-line="49" selection-end-column="0" />
<folding>
<element signature="e#0#54#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/custom-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="415">
<caret line="29" column="13" lean-forward="true" selection-start-line="29" selection-start-column="13" selection-end-line="29" selection-end-column="13" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/custom-input.module.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="380">
<caret line="19" column="12" lean-forward="false" selection-start-line="19" selection-start-column="12" selection-end-line="19" selection-end-column="12" />
<folding>
<element signature="e#0#43#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/tag-input.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-85">
<caret line="49" column="25" lean-forward="false" selection-start-line="49" selection-start-column="25" selection-end-line="49" selection-end-column="25" />
<folding>
<marker date="1495058621617" expanded="true" signature="672:733" ph="..." />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.component.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="20">
<caret line="1" column="40" lean-forward="false" selection-start-line="1" selection-start-column="40" selection-end-line="1" selection-end-column="40" />
<state relative-caret-position="240">
<caret line="12" column="145" lean-forward="false" selection-start-line="12" selection-start-column="145" selection-end-line="12" selection-end-column="145" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="180">
<caret line="9" column="46" lean-forward="true" selection-start-line="9" selection-start-column="46" selection-end-line="9" selection-end-column="46" />
<folding />
</state>
</provider>

View File

@@ -4,5 +4,6 @@
"routes": {
"/node_modules": "node_modules"
}
}
},
"reloadDebounce": 2000
}

View File

@@ -1,6 +1,18 @@
<form #form="ngForm">
<counter-input [(ngModel)]="result" name="res"></counter-input>
<form #formCounter="ngForm">
<counter-input [(ngModel)]="resultCounter" name="res"></counter-input>
</form>
<p>Value:</p>
<pre>{{ result }}</pre>
<pre>{{ resultCounter }}</pre>
<hr>
<form #formTag="ngForm">
<tag-input [(ngModel)]="resultTag" name="res" [id]="'a'" [items]="{'alpha': 'A', 'beta': 'B', 'gamma': 'G'}"></tag-input>
<tag-input [(ngModel)]="resultTag2" name="res2" [id]="'b'" [items]="{'alpha': 'A', 'beta': 'B', 'gamma': 'G'}" [nullable]="true"></tag-input>
</form>
<p>Value:</p>
<pre>{{ resultTag | json }}</pre>
<pre>{{ resultTag2 | json }}</pre>

View File

@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
})
export class AppComponent {
public result = 10;
public resultCounter = 10;
public resultTag = {"alpha": true, "beta": false};
public resultTag2 = {"alpha": true, "beta": false};
}

View File

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {JsonInputModule} from "./counter-input.module";
import {CustomInputModule} from "./custom-input.module";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@NgModule({
@@ -10,7 +10,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
BrowserModule,
FormsModule,
ReactiveFormsModule,
JsonInputModule,
CustomInputModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]

View File

@@ -45,6 +45,11 @@ export class CounterInputComponent extends CustomInputComponent {
this.value = this.value + number;
this.parseError = isNaN(this.value);
super.onChange(number);
super.change();
}
// on touched
protected onBlur(): void {
super.blur();
}
}

View File

@@ -1,7 +1,7 @@
import {ControlValueAccessor, FormControl, ValidationErrors, Validator} from '@angular/forms';
export abstract class CustomInputComponent implements ControlValueAccessor, Validator {
protected value: number;
protected value: any;
protected parseError: boolean;
private propagateChange: (_: any) => void = () => {};
private propagateTouch: () => void = () => {};
@@ -23,12 +23,12 @@ export abstract class CustomInputComponent implements ControlValueAccessor, Vali
public abstract validate(c: FormControl): ValidationErrors;
// on change
protected onChange(value: any): void {
protected change(): void {
this.propagateChange(this.value);
}
// on touch
protected onBlur(): void {
protected blur(): void {
this.propagateTouch();
}
}

View File

@@ -2,6 +2,7 @@ import {FormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CounterInputComponent } from './counter-input.component';
import {KeysPipe, TagInputComponent} from './tag-input.component';
@NgModule({
@@ -11,10 +12,13 @@ import { CounterInputComponent } from './counter-input.component';
],
exports: [
CounterInputComponent,
TagInputComponent,
],
declarations: [
CounterInputComponent,
TagInputComponent,
KeysPipe
],
providers: [],
})
export class JsonInputModule { }
export class CustomInputModule { }

View File

@@ -0,0 +1,88 @@
import {Component, forwardRef, Input, Pipe, PipeTransform} from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
import {CustomInputComponent} from "./custom-input.component";
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value: Object, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
@Component({
selector: 'tag-input',
template:
`
<div *ngFor="let entry of value | keys" (click)="onChange(entry.key, true)" (contextmenu)="onChange(entry.key, false)">
{{items[entry.key]}}: {{entry.value}}
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TagInputComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => TagInputComponent),
multi: true,
}]
})
export class TagInputComponent extends CustomInputComponent {
@Input() items: Array<{key: string, value: string}> = [];
@Input() nullable: boolean = false;
@Input() id: string = "";
// set initial value
public writeValue(obj: any): void {
let isUpdated = false;
this.value = {};
if (!obj) {
obj = {};
}
for (let key in this.items) {
if (this.items.hasOwnProperty(key)) {
if (obj.hasOwnProperty(key) && (typeof(obj[key]) === "boolean" || (this.nullable && null===obj[key])))
this.value[key] = obj[key];
else {
isUpdated = true;
this.value[key] = (this.nullable ? null : false);
}
}
}
console.log(this.id, isUpdated, this.value);
if (isUpdated) {
super.change();
}
}
// validates the form, returns null when valid else the validation object
public validate(c: FormControl): ValidationErrors {
return null;
}
// on button click
protected onChange(key: string, forward: boolean): boolean {
let value = this.value[key];
if (!this.nullable)
value = !value;
else if (value===null)
value = forward;
else if ((value ? !forward : forward))
value = null;
else
value = !value;
this.value = Object.assign({}, this.value);
this.value[key] = value;
super.change();
return false;
}
}