Readme

letterSelect (`component`)

Description

This blueprint is based on the blueprint of Veams.

Requirements

Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/letter-select

Fields

`letter-select.hbs`

Settings

Parameter	Type	Default	Description
settings.letterSelectClasses	String	`''`	Modifier classes for component
settings.letterSelectContextClass	String	`'default'`	Context class of component
settings.letterSelectJsOptions	Object	`null`	JavaScript options object which gets stringified
settings.letterSelectJsModule	String	‘’	Integrate the js-Modul Name ‘letter-select’ to get the Modul if it is integrated in other moduls and it is for the scrollbar-solution
settings.letterSelectID	int	Number for the id of the inputfield. It is importnat if there are more than 1 Elemnt in a page to have different ids for every letter-select included.
settings.scrollIndicatorEnabled	Boolean	`true`	Here you can handle if the Scrollindicator will be used or not ‘true’ : Everything for the Functionality of the scroll-indicator will be included
setting.letterUsedForFilter	STRING	Comma seperated List of active letters. Only this Letters will be active.

Content

Parameter	Type	Description
content.letteritems	Array with Objects	Every Arrayentry is an Objekt with Infos to the specific Letter

`letter-select__item.hbs`

Settings

Parameter	Type	Description
settings.letterSelectID	int	Specific number for one A-Z-Filter. This Number will be integrated in the id of the checkbox und in the for-Attribute of the Label. it should be the same ID as in the parent Attribute letterSelectID.

Every AZ-Filter-Modul in a webpage should have a key-ID for the whole site. In FS it is possible to take the ID of the Absatzvorlage

Content

| Parameter | Type | Description | | content.lettername | STRING | one alphabetic letter in uppercase

JavaScript Options

The module gives you the possibility to override default JS options:

Option	Type	Default	Description

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description

Modifier Classes

There are modifier classes you can add to c-letter-select:

Modifier	Description
is-scrollable-left	is for CSS-handling the overlay on the left side of the A-Z-Filter by using a scrollbar. Javascript is handling the use of the css class depending of the position of the scrollbar
is-scrollable-right	is for CSS-handling the overlay on the right side of the A-Z-Filter by using a scrollbar. Javascript is handling the use of the css class depending of the position of the scrollbar
is-not-included	set a letter to inaktiv view

Templates

letter-select.hbs

<form >
<div class="c-letter-select{{#if settings.letterSelectContextClass}}--{{settings.letterSelectContextClass}}{{else}}--default{{/if}}{{#if settings.letterSelectClasses}} {{settings.letterSelectClasses}}{{/if}}"
     data-css="c-letter-select" {{#if
		settings.letterSelectJsModule}}
     data-js-module="{{settings.letterSelectJsModule}}"{{#if settings.letterSelectJsOptions}}
     data-js-options='{{stringify settings.letterSelectJsOptions}}'{{/if}}{{/if}}>
 	<div class="letter-select__content" {{#if settings.scrollIndicatorEnabled}} data-js-item="letter-scroll-indicator"{{/if}}>
		<div class="letter-select__wrapper"{{#if settings.scrollIndicatorEnabled}}
				     data-js-item="letter-scroll-wrapper"{{/if}}>
			<div class="letter-select__area"{{#if settings.scrollIndicatorEnabled}}
					    data-js-item="letter-scroll-content"{{/if}} data-js-item-letters="selected-letters" data-js-letters-content="{{#if settings.letterUsedForFilter}}{{settings.letterUsedForFilter}}{{/if}}">
				{{#if content.letteritems}}
					{{#each content.letteritems}}
						<div class="letter-select__item-wrapper">
						{{> letter-select__item}}
						</div>
					{{/each}}
				{{/if}}
			</div>
		</div>
	</div>
	<input type="hidden" id="{{#if settings.letterSelectID}}{{settings.letterSelectID}}-{{/if}}az-select" name="{{#if settings.letterSelectID}}{{settings.letterSelectID}}-{{/if}}az-select" data-js-item="choosen-az" value="">
</div>
</form>

letter-select__item.hbs

{{#if content.lettername}}
<input type="checkbox" id="{{settings.letterSelectID}}-letter_{{content.lettername}}" name="letters" value="{{content.lettername}}" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="{{settings.letterSelectID}}-letter_{{content.lettername}}" data-letter="{{content.lettername}}" class="letter-select__label">{{content.lettername}}</label>
{{/if}}

Data File

letter-select.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"letterSelectContextClass": "default",
				"letterSelectClasses": "",
				"letterSelectJsModule": "letter-select",
				"letterSelectID": "1",
				"letterSelectJsOptions": {
					"scrollToEnd": false
				},
				"scrollIndicatorEnabled": true,
				"letterUsedForFilter": "A,B,C,D,E,F,G,H,I,L,M,N,O,P"

			},
			"content": {
				"letteritems":[
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "A"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "B"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "C"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "D"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "E"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "F"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "G"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "H"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "I"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "J"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "K"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "L"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "M"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "N"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "O"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "P"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "Q"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "R"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "S"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "T"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "U"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "V"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "W"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "X"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "Y"
						}
					},
					{
						"settings": {
							"letterSelectID": "1"
						},
						"content": {
							"lettername": "Z"
						}
					}
				]
			}
		}
	}
}

Styles

letter-select.scss

/* ===================================================
component: letter-select
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-letter-select"] {

	.letter-select__content{
		position: relative;
		margin: 0 auto;

		&::-webkit-scrollbar {
			display: none;
		}

		&::before,
		&::after {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 40px;
			z-index: 1;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-scrollable-left {

			&::before {
				content: '';
				left: -1px;
				width: 50px;
				background: linear-gradient(to right, rgba($color-white, 1), rgba($color-white, 1) 33%, rgba($color-white, 0));
			}
		}

		&.is-scrollable-right {

			&::after {
				content: '';
				right: -1px;
				background: linear-gradient(to left, rgba($color-white, 1), rgba($color-white, 1) 33%, rgba($color-white, 0));
			}

		}
	}

	.letter-select__wrapper {

		overflow-x: auto;
		overflow-y: hidden;
		overflow: -moz-scrollbars-auto;
		-ms-overflow-style: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 0;

		@include print() {
			overflow: visible;
		}
	}

	.letter-select__area {
		position: relative;
		display: inline-block;
		white-space: nowrap;
		padding: 0;

		@include bp($bp-tablet-l) {
			padding: 0;
		}

		@include print() {
			white-space: normal;
			padding: 0;
		}
	}

	.letter-select__item-wrapper {
		white-space: nowrap;
		display: inline-block;

		&.is-not-included {
			//display: none;

			.letter-select__label {
				background-color: $color-gray;
				border: 1px solid $color-gray;

				&:hover {
					background-color: $color-gray;
					color: $color-white;
					border: 1px solid $color-gray;
					cursor: default;
				}
			}
		}
		label[data-letter="I"]{
            padding: 3px 0px 0px 12px;
        }
        label[data-letter="W"], label[data-letter="M"]{
            padding: 3px 0px 0px 7px;
        }

	}

	.letter-select__checkbox {
		@extend %visuallyhidden;
		float: left;

		@include hcm() {
			border: 1px solid $color-white;
			margin-top: 8px;
			clip: auto;
			position: relative;
			float: left;
			cursor: pointer;

			& ~ .letter-select__label {
				padding: 0px 8px;
				margin-right: 20px;
				width: auto;
				display: block;
				height: auto;
				float: left;
				background-color: $color-white;
				color: $color-black;
				border: 1px solid $color-white;
				line-height: 1.6em; // refactor to unitless line-height
				font-size: 1.8rem;
				letter-spacing: .27px;

				&:hover,
				&.a11y-focus-key {
					background-color: $color-white;
					color: $color-black;
					border: 1px solid $color-white;
				}
			}
		}

		&:checked {

			& ~ .letter-select__label {
				background-color: $color-white;
				color: $color-green;
				padding: 2px 0px 0px 8px;
				border: 2px solid $color-green;

				&:hover {
					padding: 3px 0px 0px 9px;
					border: 1px solid $color-green;
				}

				@include print() {
					padding: 0px 0px 0px 2px;
					border: 0;
					font-family: $font-bold;
					font-size: 1.6rem;
					line-height: (24/16);
					letter-spacing: .3px;
				}
			}

			&.a11y-focus-key {

				& ~ .letter-select__label {
					border: 2px dashed #800;
				}
			}
		}

		&.a11y-focus-key {

			& ~ .letter-select__label {
				border: 2px dashed #800;
			}
		}
	}

	.letter-select__label {
		margin-right: 12px;
		padding: 3px 0px 0px 9px;
		background-color: $color-green;
		color: $color-white;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: relative;
		font-family: $font-bold;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		border: 1px solid $color-green;

		&:hover {
			background-color: $color-white;
			color: $color-green;
			border: 1px solid $color-green;
			cursor: pointer;
		}

		@include bp($bp-tablet-l) {
			margin-right: 4px;
		}

		@include bp($bp-desktop-m) {
			margin-right: 2px;
		}

		@include print() {
			margin-right: 1px;
			padding: 0px 0px 0px 4px;
			width: 19px;
			height: 19px;
			font-family: $font-regular;
			font-size: 1.5rem;
			line-height: (22/15);
			letter-spacing: .25px;
			border: 1px solid $color-black;
		}
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-letter-select--default {
}

Scripts

letter-select.js

/**
 * Description of LetterSelect.
 * Class properties and decorators are supported.
 *
 * @module LetterSelect
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class LetterSelect extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);
	$scrollIndicator = $(this.options.selectors.scrollIndicator, this.$el);
	$scrollWrapper = $(this.options.selectors.scrollWrapper, this.$el);
	$scrollContent = $(this.options.selectors.scrollContent, this.$el);
	$choosenAZField = $(this.options.selectors.choosenAZField, this.$el);
	_wrapperDimension = null;
	_contentDimension = null;

	constructor(obj) {
		let options = {
			classes: {
				down: 'is-scrollable-down',
				left: 'is-scrollable-left',
				right: 'is-scrollable-right',
				up: 'is-scrollable-up'
			},
			activeLetterElement: [],
			letterItems: [],
			selectedLettersElement: [],
			selectedLetters: [],
			allselectedLetters: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
			isVerticalScroll: false,
			offset: 20,
			scrollToEnd: false,
			selectors: {
				scrollContent: '[data-js-item="letter-scroll-content"]',
				scrollIndicator: '[data-js-item="letter-scroll-indicator"]',
				scrollWrapper: '[data-js-item="letter-scroll-wrapper"]',
				letterItemCheckbox: '[data-js-item="letter-item-chbx"]',
				choosenAZField: '[data-js-item="choosen-az"]'
			}
		};

		super(obj, options);
	}



	/** =================================================
	 * GETTER & SETTER
	 * ================================================ */

	/**
	 * Get module information
	 */
	 static get info() {
		return {
			version: '1.0.0'
		};
	}

	get subscribe() {
		return {
			'{{context.EVENTS.resize}}': 'update'
		};
	}

	/**
	 * Set wrapper dimension
	 */
	set wrapperDimension(dimension) {
		this._wrapperDimension = dimension;
	}

	/**
	 * Get wrapper dimension
	 */
	get wrapperDimension() {
		return this._wrapperDimension;
	}

	/**
	 * Set content dimension
	 */
	set contentDimension(dimension) {
		this._contentDimension = dimension;
	}

	/**
	 * Get content dimension
	 */
	get contentDimension() {
		return this._contentDimension;
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */

	/**
	 * Bind additional events (or non bubbling events)
	 */
	bindEvents() {

		this.options.letterItems = this.el.querySelectorAll(
			'[data-js-item="letter-item-chbx"]'
		);

		if (this.options.letterItems.length > 0) {
			this.options.letterItems.forEach(opt => {
				opt.addEventListener('click', () => {
					this.handleLetterItems(opt);
				});
			});

			this.options.letterItems.forEach(checkbox => {
				checkbox.addEventListener('keydown', event => {
					const keyCode = event.which || event.keyCode;
					//alert (keyCode);
					switch (keyCode) {
						// esc key
						case 13:
							if (this.options.selectedLetters.includes ( checkbox.value.toUpperCase() )) {
								if (checkbox.checked) {
									checkbox.checked = false;
								} else {
									checkbox.checked = true;
								}
								this.handleLetterItems(checkbox);
							}
							break;
					}
				});
			});
		}

		let fnUpdate = this.update.bind(this);
		this.$scrollWrapper.on(this.context.EVENTS.scroll, fnUpdate);
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */

	didMount() {
		if (this.options.isVerticalScroll) {
			this.scrollStartClass = this.options.classes.up;
			this.scrollEndClass = this.options.classes.down;
			this.scrollFunc = 'scrollTop';
		} else {
			this.scrollStartClass = this.options.classes.left;
			this.scrollEndClass = this.options.classes.right;
			this.scrollFunc = 'scrollLeft';
		}

		this.update();

		/* Handling of existing Letters. Can be activated by setting Attribute data-js-letters-content with a comma seperated String of all used letters   */
		this.options.selectedLettersElement = this.el.querySelectorAll(
			'[data-js-item-letters="selected-letters"]'
		);

		if (this.options.selectedLettersElement.length > 0) {
			if (this.options.selectedLettersElement[0].getAttribute("data-js-letters-content") && this.options.selectedLettersElement[0].getAttribute("data-js-letters-content").length > 0) {
				this.options.selectedLetters = this.options.selectedLettersElement[0].getAttribute("data-js-letters-content").toUpperCase().split(',');
			} else {
				this.options.selectedLetters = this.options.allselectedLetters;
			}
		} else {
			this.options.selectedLetters = this.options.allselectedLetters;
		}
		/* Setting a Class for the not used Letters */
		this.options.letterItems.forEach(opt => {
			if (!this.options.selectedLetters.includes ( opt.value.toUpperCase() )) {
				let closestList = opt.closest("div");
				closestList.classList.add("is-not-included");
				opt.setAttribute("disabled","disabled");
			}
		});

	}

	/**
	 * Render class
	 */

	render() {
		return this;
	}

	/** =================================================
	 * CUSTOM SCROLL INDICATOR METHODS
	 * ================================================= */

	/**
	 * Update dimensions and classes
	 *
	 * @param {Object} [e] - event object
	 */
	 update(e) {
		this.updateDimensions();

		if ((!e || e.type === 'resize') && this.options.scrollToEnd) {
			this.$scrollWrapper[0][this.scrollFunc] = this.contentDimension;
		}

		this.updateClasses();
	}

	/**
	 * Update classes
	 *
	 */
	updateClasses() {
		let scrolled = this.$scrollWrapper[0][this.scrollFunc];
		if (this.contentDimension <= this.wrapperDimension) {
			this.$scrollIndicator.removeClass(this.scrollStartClass + ' ' + this.scrollEndClass);

			return;
		}

		if (scrolled <= this.options.offset) {
			this.$scrollIndicator.removeClass(this.scrollStartClass);
		} else {
			this.$scrollIndicator.addClass(this.scrollStartClass);
		}

		if (scrolled >= this.contentDimension - this.wrapperDimension - this.options.offset) {
			this.$scrollIndicator.removeClass(this.scrollEndClass);
		} else {
			this.$scrollIndicator.addClass(this.scrollEndClass);
		}
	}

	/**
	 * Update dimensions
	 *
	 */
	updateDimensions() {
		if (this.options.isVerticalScroll) {
			this.wrapperDimension = this.$scrollWrapper[0].clientHeight;
			this.contentDimension = this.$scrollContent.outerHeight(true);
		} else {
			this.wrapperDimension = this.$scrollWrapper[0].clientWidth;

			this.contentDimension = this.$scrollContent.outerWidth(true);
		}
	}

		/**
	 * Script to get the result of a checkbox click
	 * All checkboxes will be set to unchecked, the clicked checkbox will be set to checked
	 *
	 * @param {Object} [e] - Event object
	 */
	handleLetterItems(e) {
		if (this.options.selectedLetters.includes ( e.value.toUpperCase() )) {
			if (e.checked) {
				this.options.letterItems.forEach(opt => {
					opt.checked = false;
				});
				e.checked = true;
				this.$choosenAZField.val(e.value);
			} else {
				this.$choosenAZField.val("");
			}
			this.$choosenAZField.trigger('change');
		} else {
			e.checked = false;
		}
	}
}

export default LetterSelect;

HTML Output

Default

<form>
	<div class="c-letter-select--default" data-css="c-letter-select" data-js-module="letter-select" data-js-options='{&quot;scrollToEnd&quot;:false}'>
		<div class="letter-select__content" data-js-item="letter-scroll-indicator">
			<div class="letter-select__wrapper" data-js-item="letter-scroll-wrapper">
				<div class="letter-select__area" data-js-item="letter-scroll-content" data-js-item-letters="selected-letters" data-js-letters-content="A,B,C,D,E,F,G,H,I,L,M,N,O,P">
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_A" name="letters" value="A" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_A" data-letter="A" class="letter-select__label">A</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_B" name="letters" value="B" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_B" data-letter="B" class="letter-select__label">B</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_C" name="letters" value="C" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_C" data-letter="C" class="letter-select__label">C</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_D" name="letters" value="D" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_D" data-letter="D" class="letter-select__label">D</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_E" name="letters" value="E" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_E" data-letter="E" class="letter-select__label">E</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_F" name="letters" value="F" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_F" data-letter="F" class="letter-select__label">F</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_G" name="letters" value="G" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_G" data-letter="G" class="letter-select__label">G</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_H" name="letters" value="H" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_H" data-letter="H" class="letter-select__label">H</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_I" name="letters" value="I" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_I" data-letter="I" class="letter-select__label">I</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_J" name="letters" value="J" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_J" data-letter="J" class="letter-select__label">J</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_K" name="letters" value="K" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_K" data-letter="K" class="letter-select__label">K</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_L" name="letters" value="L" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_L" data-letter="L" class="letter-select__label">L</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_M" name="letters" value="M" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_M" data-letter="M" class="letter-select__label">M</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_N" name="letters" value="N" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_N" data-letter="N" class="letter-select__label">N</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_O" name="letters" value="O" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_O" data-letter="O" class="letter-select__label">O</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_P" name="letters" value="P" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_P" data-letter="P" class="letter-select__label">P</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_Q" name="letters" value="Q" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_Q" data-letter="Q" class="letter-select__label">Q</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_R" name="letters" value="R" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_R" data-letter="R" class="letter-select__label">R</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_S" name="letters" value="S" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_S" data-letter="S" class="letter-select__label">S</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_T" name="letters" value="T" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_T" data-letter="T" class="letter-select__label">T</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_U" name="letters" value="U" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_U" data-letter="U" class="letter-select__label">U</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_V" name="letters" value="V" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_V" data-letter="V" class="letter-select__label">V</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_W" name="letters" value="W" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_W" data-letter="W" class="letter-select__label">W</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_X" name="letters" value="X" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_X" data-letter="X" class="letter-select__label">X</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_Y" name="letters" value="Y" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_Y" data-letter="Y" class="letter-select__label">Y</label>
					</div>
					<div class="letter-select__item-wrapper">
						<input type="checkbox" id="1-letter_Z" name="letters" value="Z" class="letter-select__checkbox" data-js-item="letter-item-chbx"><label for="1-letter_Z" data-letter="Z" class="letter-select__label">Z</label>
					</div>
				</div>
			</div>
		</div>
		<input type="hidden" id="1-az-select" name="1-az-select" data-js-item="choosen-az" value="">
	</div>
</form>

LETTER-SELECT (LMU-Intern Modul )

src/app/shared/components/letter-select/templates

Demo Section

Default

Readme

letterSelect (`component`)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

`letter-select.hbs`

Settings

Content

`letter-select__item.hbs`

Settings

Content

| Parameter | Type | Description | | content.lettername | STRING | one alphabetic letter in uppercase

JavaScript Options

SASS

Variables

Modifier Classes

Templates

letter-select.hbs

letter-select__item.hbs

Data File

letter-select.hjson

Styles

letter-select.scss

Scripts

letter-select.js

HTML Output

Default

Wonach suchst du?

LETTER-SELECT (LMU-Intern Modul )

src/app/shared/components/letter-select/templates

Demo Section

Default

Readme

letterSelect (component)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

letter-select.hbs

Settings

Content

letter-select__item.hbs

Settings

Content

| Parameter | Type | Description | | content.lettername | STRING | one alphabetic letter in uppercase

JavaScript Options

SASS

Variables

Modifier Classes

Templates

letter-select.hbs

letter-select__item.hbs

Data File

letter-select.hjson

Styles

letter-select.scss

Scripts

letter-select.js

HTML Output

Default

Wonach suchst du?

letterSelect (`component`)

`letter-select.hbs`

`letter-select__item.hbs`