@ui5/webcomponents 0.0.0-6895c16dd → 0.0.0-69dbc5a15

package/src/CheckBox.js

@@ -1,356 +0,0 @@
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents-icons/dist/accept.js";
-import Icon from "./Icon.js";
-import Label from "./Label.js";
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
-
-// Template
-import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js";
-
-// Styles
-import checkboxCss from "./generated/themes/CheckBox.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-checkbox",
-	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
-
-		/**
-		 * Defines whether the <code>ui5-checkbox</code> is disabled.
-		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-checkbox</code> is completely noninteractive.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-checkbox</code> is read-only.
-		 * <br><br>
-		 * <b>Note:</b> A red-only <code>ui5-checkbox</code> is not editable,
-		 * but still provides visual feedback upon user interaction.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines if the <code>ui5-checkbox</code> is checked.
-		 * <br><br>
-		 * <b>Note:</b> The property can be changed with user interaction,
-		 * either by cliking/tapping on the <code>ui5-checkbox</code>, or by
-		 * pressing the Enter or Space key.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		checked: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the text of the <code>ui5-checkbox</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		text: {
-			type: String,
-		},
-
-		/**
-		 * Defines the value state of the <code>ui5-checkbox</code>.
-		 * <br><br>
-		 * <b>Note:</b> Available options are <code>Warning</code>, <code>Error</code>, and <code>None</code> (default).
-		 *
-		 * @type {ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-checkbox</code> text wraps when there is not enough space.
-		 * <br><br>
-		 * <b>Note:</b> By default, the text truncates when there is not enough space.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		wrap: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines the name with which the <code>ui5-checkbox</code> will be submitted in an HTML form.
-		 *
-		 * <br><br>
-		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-		 *
-		 * <br><br>
-		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-checkbox</code> so that it can be submitted as
-		 * part of an HTML form. Do not use this property unless you need to submit a form.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		name: {
-			type: String,
-		},
-
-		/**
-		 * Determines the <code>aria-label</code>, set on the component root tag.
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		ariaLabel: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the checkbox
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
-
-		_label: {
-			type: Object,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
-
-		/**
-		 * Fired when the <code>ui5-checkbox</code> checked state changes.
-		 *
-		 * @public
-		 * @event
-		 */
-		change: {},
-	},
-};
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * Allows the user to set a binary value, such as true/false or yes/no for an item.
- * <br><br>
- * The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose.
- * If it's checked, an indicator is displayed inside the box.
- * To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square
- * box or its label.
- * <br><br>
- * The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked.
- * Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.
- *
- * <h3>Usage</h3>
- *
- * You can manually set the width of the element containing the box and the label using the <code>width</code> property.
- * If the text exceeds the available width, it is truncated.
- * The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends.
- * <br><br>
- * You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
- * <code>true</code>,
- * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>
- * property to <code>true</code>.
- *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/CheckBox";</code>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.CheckBox
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-checkbox
- * @public
- */
-class CheckBox extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return CheckBoxTemplate;
-	}
-
-	static get styles() {
-		return checkboxCss;
-	}
-
-	constructor() {
-		super();
-
-		this._label = {};
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	onBeforeRendering() {
-		this.syncLabel();
-
-		this._enableFormSupport();
-	}
-
-	syncLabel() {
-		this._label = Object.assign({}, this._label);
-		this._label.text = this.text;
-		this._label.wrap = this.wrap;
-		this._label.textDirection = this.textDirection;
-	}
-
-	_enableFormSupport() {
-		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? "on" : "";
-			});
-		} else if (this.name) {
-			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-		}
-	}
-
-	_onclick() {
-		this.toggle();
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this.toggle();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this.toggle();
-		}
-	}
-
-	toggle() {
-		if (this.canToggle()) {
-			this.checked = !this.checked;
-			this.fireEvent("change");
-			// Angular two way data binding
-			this.fireEvent("value-changed");
-		}
-		return this;
-	}
-
-	canToggle() {
-		return !(this.disabled || this.readonly);
-	}
-
-	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
-		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-		};
-	}
-
-	get classes() {
-		return {
-			main: {
-				"ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
-			},
-		};
-	}
-
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
-	get ariaDisabled() {
-		return this.disabled ? "true" : undefined;
-	}
-
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
-	get ariaLabelledBy() {
-		if (!this.ariaLabelText) {
-			return this.text ? `${this._id}-label` : undefined;
-		}
-
-		return undefined;
-	}
-
-	get ariaDescribedBy() {
-		return this.hasValueState ? `${this._id}-descr` : undefined;
-	}
-
-	get hasValueState() {
-		return this.valueState !== ValueState.None;
-	}
-
-	get valueStateText() {
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
-	get tabIndex() {
-		const tabindex = this.getAttribute("tabindex");
-		return this.disabled ? undefined : tabindex || "0";
-	}
-
-	static get dependencies() {
-		return [
-			Label,
-			Icon,
-		];
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-}
-
-CheckBox.define();
-
-export default CheckBox;

package/src/ColorPalette.hbs

@@ -1,26 +0,0 @@
-<div class="ui5-cp-root">
-	<div class="ui5-cp-item-container" 
-		role="region"
-		aria-label="{{colorContainerLabel}}"
-		@click={{_onclick}}
-		@keyup={{_onkeyup}}
-		@keydown={{_onkeydown}}>
-		{{#each this.displayedColors}}
-			<slot
-				name="{{this._individualSlot}}"
-			>
-			</slot>
-		{{/each}}
-	</div>
-
-	{{#if showMoreColors}}
-		<div class="ui5-cp-more-colors-wrapper">
-			<div class="ui5-cp-separator"></div>
-			<ui5-button
-				design="Transparent"
-				class="ui5-cp-more-colors"
-				@click="{{_openMoreColorsDialog}}"
-			>{{colorPaleteMoreColorsText}}...</ui5-button design="Transparent">
-		</div>
-	{{/if}}
-</div>

package/src/ColorPalette.js

@@ -1,247 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
-import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
-import {
-	isSpace,
-	isEnter,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
-import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
-import ColorPaletteItem from "./ColorPaletteItem.js";
-import {
-	COLORPALETTE_CONTAINER_LABEL,
-	COLOR_PALETTE_MORE_COLORS_TEXT,
-} from "./generated/i18n/i18n-defaults.js";
-
-// Styles
-import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
-import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-color-palette",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
-		/**
-		 * Defines whether the user can choose a custom color from a color picker
-		 * <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
-		 * @type {Boolean}
-		 * @public
-		 * @since 1.0.0-rc.12
-		 */
-		moreColors: {
-			type: Boolean,
-		},
-
-		/**
-		 *
-		 * The selected color.
-		 * @type {CSSColor}
-		 * @public
-		 */
-		value: {
-			type: CSSColor,
-		 },
-	},
-	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
-		/**
-		 * Defines the <code>ui5-color-palette-item</code> items.
-		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
-		 * @slot colors
-		 * @public
-		 */
-		"default": {
-			propertyName: "colors",
-			type: HTMLElement,
-			invalidateOnChildChange: true,
-			individualSlots: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
-		/**
-		 * Fired when the user selects a color.
-		 *
-		 * @event
-		 * @public
-		 * @param {String} color the selected color
-		 */
-		change: {
-			details: {
-				color: {
-					type: "String",
-				},
-			},
-		 },
-	},
-};
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- * The ColorPalette provides the users with a range of predefined colors.
- * You can set them by using the ColorPaletteItem items as slots.
- *
- * <h3>Usage</h3>
- * The palette is intended for users, who don't want to check and remember the different values of the colors .
- *
- * For the <code>ui5-color-palette</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents/dist/ColorPalette.js";</code>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.ColorPalette
- * @extends UI5Element
- * @tagname ui5-color-palette
- * @since 1.0.0-rc.12
- * @appenddocs ColorPaletteItem
- * @public
- */
-class ColorPalette extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ColorPaletteCss;
-	}
-
-	static get staticAreaStyles() {
-		return ColorPaletteStaticAreaCss;
-	}
-
-	static get template() {
-		return ColorPaletteTemplate;
-	}
-
-	static get staticAreaTemplate() {
-		return ColorPaletteDialogTemplate;
-	}
-
-	static get dependencies() {
-		const moreColorsFeature = getFeature("ColorPaletteMoreColors");
-
-		return [ColorPaletteItem].concat(moreColorsFeature ? moreColorsFeature.dependencies : []);
-	}
-
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-		this._itemNavigation = new ItemNavigation(this, {
-			getItemsCallback: () => this.displayedColors,
-			rowSize: 5,
-			behavior: ItemNavigationBehavior.Cyclic,
-		});
-	}
-
-	onBeforeRendering() {
-		this.displayedColors.forEach((item, index) => {
-			item.index = index + 1;
-		});
-
-		if (this.moreColors) {
-			const moreColorsFeature = getFeature("ColorPaletteMoreColors");
-			if (moreColorsFeature) {
-				this.moreColorsFeature = new moreColorsFeature();
-			} else {
-				throw new Error(`You have to import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" module to use the more-colors functionality.`);
-			}
-		}
-	}
-
-	selectColor(item) {
-		item.focus();
-		this._itemNavigation.setCurrentItem(item);
-
-		this._setColor(item.value);
-	}
-
-	_setColor(color) {
-		this.value = color;
-
-		this.fireEvent("change", {
-			color: this.value,
-		});
-	}
-
-	_onclick(event) {
-		if (event.target.localName === "ui5-color-palette-item") {
-			this.selectColor(event.target);
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			event.preventDefault();
-			this.selectColor(event.target);
-		}
-	}
-
-	_onkeydown(event) {
-		if (isEnter(event)) {
-			this.selectColor(event.target);
-		}
-	}
-
-	async _chooseCustomColor() {
-		const colorPicker = await this.getColorPicker();
-		this._setColor(colorPicker.color);
-		this._closeDialog();
-	}
-
-	async _closeDialog() {
-		const dialog = await this._getDialog();
-		dialog.close();
-	}
-
-	async _openMoreColorsDialog() {
-		const dialog = await this._getDialog();
-		dialog.open();
-	}
-
-	get displayedColors() {
-		return this.colors.filter(item => item.value).slice(0, 15);
-	}
-
-	get colorContainerLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
-	}
-
-	get colorPaleteMoreColorsText() {
-		return this.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
-	}
-
-	get showMoreColors() {
-		return this.moreColors && this.moreColorsFeature;
-	}
-
-	async _getDialog() {
-		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem.querySelector("ui5-dialog");
-	}
-
-	async getColorPicker() {
-		const dialog = await this._getDialog();
-		return dialog.content[0].querySelector("ui5-color-picker");
-	}
-}
-
-ColorPalette.define();
-
-export default ColorPalette;

package/src/ColorPaletteDialog.hbs

@@ -1,18 +0,0 @@
-<ui5-dialog
-    header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
->
-    <div class="ui5-cp-dialog-content">
-        <ui5-color-picker></ui5-color-picker>
-    </div>
-
-    <div slot="footer" class="ui5-cp-dialog-footer">
-        <ui5-button
-            design="Transparent"
-            @click="{{_chooseCustomColor}}"
-        >{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
-        <ui5-button
-            design="Transparent"
-            @click="{{_closeDialog}}"
-        >{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
-    </div>
-</ui5-dialog>

package/src/ColorPaletteItem.hbs

@@ -1,10 +0,0 @@
-<div
-	class="ui5-cp-item"
-	style="background-color: {{value}}"
-	value="{{value}}"
-	tabindex="{{_tabIndex}}"
-	role="button"
-	aria-label="{{colorLabel}} - {{index}}: {{this.value}}"
-	title="{{colorLabel}} - {{index}}: {{this.value}}"
->
-</div>