Feature/zoo input tag enhancements

CHANGELOG.md

@@ -1,11 +1,26 @@
 # CHANGELOG
 
-## 10.3.5
+## 10.4.0
 
-`zoo-tooltip` - added CSS variable `zoo-tooltip-z-index` to change predefined z-index in case of conflict with some other 3rd party components
-`zoo-toast` - added CSS variable `zoo-toast-z-index` to change predefined z-index in case of conflict with some other 3rd party components
-`zoo-grid` - added CSS variable `zoo-grid-z-index` to change predefined z-index in case of conflict with some other 3rd party components
-`zoo-spinner` - added CSS variable `zoo-spinner-z-index` to change predefined z-index in case of conflict with some other 3rd party components
+Semi-Breaking Changes:
+ - `zoo-input-tag`:
+  - added `clearSelection()` method to programmatically clear current component selection
+  - `zoo-tag-options` can contain not only `zoo-tag` elements, but custom markup
+  - `zoo-tag-options` are now stacked vertically
+  - `zoo-tag-options` - changed left,right padding to `15px` and removed `5px` gap, `--input-tag-padding-top-bottom` 
+  and `--input-tag-padding-left-right` to control component padding
+  - selection will be updated when `data-initial-value` attribute changes 
+  - `--input-tag-options-max-height` CSS variable to control max height of options list overlay
+  - `--input-tag-options-overflow` CSS variable to control options list scrolls
+ - `zoo-tag` with `type="tag"` uses same border radius as other components
+
+ CSS changes:
+ - `--item-hovered` - new CSS variable to control color of hovered areas in components
+ - `--input-disabled` - new CSS variable to control color of disabled form components
+ - `zoo-tooltip` - new CSS variable `zoo-tooltip-z-index` to change predefined z-index in case of conflict with some other 3rd party components
+ - `zoo-toast` - new CSS variable `zoo-toast-z-index` to change predefined z-index in case of conflict with some other 3rd party components
+ - `zoo-grid` - new CSS variable `zoo-grid-z-index` to change predefined z-index in case of conflict with some other 3rd party components
+ - `zoo-spinner` - new CSS variable `zoo-spinner-z-index` to change predefined z-index in case of conflict with some other 3rd party components
 
 ## 10.3.4
 

docs/index.html

@@ -102,6 +102,7 @@ <h3>Input/Textarea</h3>
 						<option value="Cat"></option>
 						<option value="Bird"></option>
 						<option value="Aquatic"></option>
+						<option value="Reptile"></option>
 					</select>
 					<zoo-input-tag-option slot="tag-option" id="dog-tag">
 						<zoo-tag slot="tag" type="tag" data-value="Dog" tabindex="0">
@@ -127,6 +128,42 @@ <h3>Input/Textarea</h3>
 						</zoo-tag>
 						<span slot="description">Birds are a group of warm-blooded vertebrates constituting the class Aves /ˈeɪviːz/, characterised by feathers, toothless beaked jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton.</span>
 					</zoo-input-tag-option>
+					<zoo-input-tag-option slot="tag-option" id="reptile-tag">
+						<zoo-tag slot="tag" type="tag" data-value="Reptile" tabindex="0">
+							<span slot="content">Reptile</span>
+						</zoo-tag>
+						<span slot="description">Reptiles, in common parlance, are a group of tetrapods with an ectothermic ('cold-blooded') metabolism and amniotic development.</span>
+					</zoo-input-tag-option>
+					<span slot="no-results">no results</span>
+				</zoo-input-tag>
+
+				<zoo-input-tag show-tags-after-select id="input-tag-custom" data-initial-value="Cat" aria-multiselectable="true">
+					<label for="input-tag" slot="label">Tag input &amp; custom option list</label>
+					<input id="input-tag-custom-input" slot="input" placeholder="Type a tag name"/>
+					<span slot="info">Start typing to see available tags. Tag filtering should be done on client side by listening on 'input' event on slotted input.</span>
+					<span slot="error">At least one tag should be selected!</span>
+					<select slot="select" multiple required>
+						<option value="Dog"></option>
+						<option value="Cat"></option>
+						<option value="Bird"></option>
+						<option value="Aquatic"></option>
+						<option value="Reptile"></option>
+					</select>
+					<zoo-input-tag-option slot="tag-option" id="dog-tagc" tabindex="0">
+						<span slot="tag" data-value="Dog" data-option-content>🐕 Dog</span>
+					</zoo-input-tag-option>
+					<zoo-input-tag-option slot="tag-option" id="cat-tagc" tabindex="0">
+						<span slot="tag" data-value="Cat" data-option-content>🐈 Cat</span>
+					</zoo-input-tag-option>
+					<zoo-input-tag-option slot="tag-option" id="bird-tagc" tabindex="0">
+						<span slot="tag" data-value="Bird" data-option-content>🐦‍⬛ Bird</span>
+					</zoo-input-tag-option>
+					<zoo-input-tag-option slot="tag-option" id="aquatic-tagc" tabindex="0">
+						<span slot="tag" data-value="Aquatic" data-option-content>🐟 Aquatic</span>
+					</zoo-input-tag-option>
+					<zoo-input-tag-option slot="tag-option" id="reptile-tagc" tabindex="0">
+						<span slot="tag" data-value="Reptile" data-option-content>🦎 Reptile</span>
+					</zoo-input-tag-option>
 					<span slot="no-results">no results</span>
 				</zoo-input-tag>
 

docs/main.js

@@ -241,7 +241,7 @@ handleExpandAction('#row-1-actions .expander', '#row-1-content');
 handleExpandAction('#row-2-actions .expander', '#row-2-content');
 handleExpandAction('#row-3-actions .expander', '#row-3-content');
 
-const tagInfos = ['dog', 'cat', 'bird', 'aquatic'];
+const tagInfos = ['dog', 'cat', 'bird', 'aquatic', 'reptile'];
 const inputTag = document.querySelector('zoo-input-tag');
 document.getElementById('input-tag').addEventListener('input', e => {
 	inputTag.querySelectorAll('zoo-input-tag-option').forEach(o => o.style.display = 'none');
@@ -250,12 +250,30 @@ document.getElementById('input-tag').addEventListener('input', e => {
 	const val = e.target.value;
 	if (!val) return;
 	const matchedTags = tagInfos.filter(i => i.toLowerCase().indexOf(val.toLowerCase()) > -1);
-	const docFrag = document.createDocumentFragment();
 	if (matchedTags && matchedTags.length > 0) {
 		matchedTags.forEach(m => {
 			document.getElementById(`${m}-tag`).style.display = 'flex';
 		});
 	} else {
 		noResultsSpan.style.display = 'flex';
 	}
-});
+});
+
+const customTagInput = document.getElementById('input-tag-custom-input');
+document.getElementById('input-tag-custom').addEventListener('input', e => {
+	customTagInput.querySelectorAll('zoo-input-tag-option').forEach(o => o.style.display = 'none');
+	const noResultsSpan = document.getElementById('input-tag-custom').querySelector('*[slot="no-results"]');
+	if (noResultsSpan) noResultsSpan.style.display = 'none';
+	const val = e.target.value;
+	if (!val) return;
+	const matchedTags = tagInfos.filter(i => i.toLowerCase().indexOf(val.toLowerCase()) > -1);
+	if (matchedTags && matchedTags.length > 0) {
+		matchedTags.forEach(m => {
+			document.getElementById(`${m}-tagc`).style.display = 'flex';
+		});
+	} else {
+		noResultsSpan.style.display = 'flex';
+	}
+	const unMatchedTags = tagInfos.filter(i => i.toLowerCase().indexOf(val.toLowerCase()) === -1);
+	unMatchedTags.forEach( m => document.getElementById(`${m}-tagc`).style.display = 'none')
+});

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zooplus/zoo-web-components",
-	"version": "10.3.4",
+	"version": "10.4.0",
 	"main": "dist/zoo-web-components.js",
 	"sideEffects": false,
 	"files": [

src/zoo-modules/form/checkbox/checkbox.css

@@ -84,7 +84,7 @@ svg path {
 }
 
 :host([disabled]) svg {
-	background: #F2F3F4;
+	background: var(--input-disabled, #F2F3F4);
 }
 
 .checkbox {

src/zoo-modules/form/input-tag/input-tag-option.css

@@ -7,7 +7,3 @@
 	font-size: 12px;
 	gap: 3px;
 }
-
-:host(:hover) {
-	background: var(--primary-ultralight);
-}

src/zoo-modules/form/input-tag/input-tag.css

@@ -4,6 +4,10 @@
 	width: 100%;
 	height: max-content;
 	box-sizing: border-box;
+
+	--input-tag-padding-top-bottom-default: 13px;
+	--input-tag-padding-left-right-default: 15px;
+	--input-tag-padding-reduced: calc(var(--input-tag-padding-top-bottom, var(--input-tag-padding-top-bottom-default)) - 1px) calc(var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default)) - 1px);
 }
 
 #input-wrapper {
@@ -14,7 +18,7 @@
 	gap: 5px;
 	font-size: 14px;
 	line-height: 20px;
-	padding: 13px 15px;
+	padding: var(--input-tag-padding-top-bottom, var(--input-tag-padding-top-bottom-default)) var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default));
 	border: 1px solid #767676;
 	border-radius: 5px;
 	color: #555;
@@ -26,7 +30,7 @@
 
 :host(:focus-within) #input-wrapper {
 	border: 2px solid #555;
-	padding: 12px 14px;
+	padding: var(--input-tag-padding-reduced);
 }
 
 :host([show-tags]) #input-wrapper {
@@ -35,7 +39,7 @@
 
 :host([invalid]) #input-wrapper {
 	border: 2px solid var(--warning-mid);
-	padding: 12px 14px;
+	padding: var(--input-tag-padding-reduced);
 }
 
 ::slotted(input) {
@@ -57,22 +61,25 @@ zoo-label {
 	position: absolute;
 	flex-wrap: wrap;
 	background: white;
-	padding: 5px;
+	padding: 5px var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default));
 	border: 1px solid #555;
 	border-radius: 0 0 3px 3px;
-	gap: 5px;
 	left: -1px;
-	top: 90%;
+	top: calc(90% + 2px);
 	border-top: 0;
 	width: calc(100% + 2px);
 	box-sizing: border-box;
+	max-height: var(--input-tag-options-max-height, fit-content);
+	overflow: var(--input-tag-options-overflow, auto);
 }
 
 :host(:focus-within) #tag-options,
 :host([invalid]) #tag-options {
 	border-width: 2px;
 	width: calc(100% + 4px);
 	left: -2px;
+	padding-left: calc(var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default)) - 1px);
+	padding-right: calc(var(--input-tag-padding-left-right, var(--input-tag-padding-left-right-default)) - 1px);
 }
 
 :host([invalid]) #tag-options {
@@ -98,5 +105,16 @@ zoo-cross-icon {
 }
 
 ::slotted(zoo-input-tag-option) {
-	flex: 1 0 30%;
+	box-sizing: border-box;
+	width: 100%;
 }
+
+::slotted(zoo-input-tag-option:hover),
+::slotted(zoo-input-tag-option[selected]:hover) {
+	background: var(--item-hovered, #E6E6E6);
+}
+
+::slotted(zoo-input-tag-option[selected]) {
+	background: var(--primary-ultralight);
+}
+