piquinikis-color-picker/src/templates/mdColorPickerContainer.tpl.html

Angular-Material inspired color picker.

<div class="md-color-picker-container in" layout="column">
	<div class="md-color-picker-arrow" ng-style="{'border-bottom-color': data.color.toRgbString() }"></div>

	<div class="md-color-picker-preview md-color-picker-checkered-bg" ng-class="{'dark': !data.color.isDark() || data.color.getAlpha() < .45}" flex="1" layout="column">

		<div class="md-color-picker-result" ng-style="{'background': data.color.toRgbString()}" flex="100" layout="column" layout-fill layout-align="center center" ng-click="focusPreviewInput( $event )">
			<!--<span flex  layout="column" layout-align="center center">{{value}}</span>-->
			<div flex  layout="row" layout-align="center center">
				<input class="md-color-picker-preview-input" type="text" ng-model="value" ng-model-options="{updateOn: 'blur'}"  />
			</div>
			<div class="md-color-picker-tabs" style="width: 100%">
				<md-tabs md-selected="config.selectedNotation" md-stretch-tabs="always" md-no-bar md-no-ink md-no-pagination="true" >
					<md-tab ng-repeat="notation in config.notations.get()"  ng-disabled="notation.disabled(data.color)" label="{{notation.name}}"></md-tab>
				</md-tabs>
			</div>
		</div>
	</div>

	<div class="md-color-picker-tabs md-color-picker-colors">
		<md-tabs md-stretch-tabs="always" md-align-tabs="bottom" md-selected="config.currentTab" md-no-pagination>
			<md-tab ng-repeat="tabName in config.tabOrder">
				<md-tab-label>
					<md-icon md-svg-icon="{{ config.tabs[ tabName ].icon }}"></md-icon>
				</md-tab-label>
				<md-tab-body>
					<div layout="row" layout-align="space-between" style="height: 255px">
						<!-- Tab Template will be added here -->
					</div>
				</md-tab-body>
			</md-tab>

		</md-tabs>
	</div>

</div>