@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition78.cjs

@@ -1,46 +1,166 @@
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition6.cjs");
-const require_definition$1 = require("./definition9.cjs");
-const require_definition$2 = require("./definition22.cjs");
-const require_definition$3 = require("./definition26.cjs");
-const require_picker_field_template = require("./picker-field.template.cjs");
-const require_time_selection_picker_template = require("./time-selection-picker.template.cjs");
-//#region src/lib/time-picker/time-picker.template.ts
-var TimePickerTemplate = (context) => {
-	return require_picker_field_template.PickerFieldTemplate(context, require_time_selection_picker_template.TimeSelectionPickerTemplate(context, 6), {
-		withSeparator: true,
-		padded: false
-	});
+const require_definition = require("./definition.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
+const require_affix = require("./affix.cjs");
+const require_component_enum = require("./component-enum.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_localized = require("./localized.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/tag/tag.ts
+var tagConnotation = require_component_enum.componentEnum([
+	"accent",
+	"cta",
+	"success",
+	"alert",
+	"warning",
+	"information",
+	"announcement"
+], "accent");
+var tagAppearance = require_component_enum.componentEnum([
+	"subtle",
+	"duotone",
+	"subtle-light"
+], "subtle");
+/**
+* @public
+* @component tag
+* @slot icon - The preferred way to add an icon to the component.
+* @event {CustomEvent<undefined>} selected-change - Fires when the selected state changes
+* @event {CustomEvent<undefined>} removed - Fires when the tag is removed
+* @testSelector byLabel byLabel
+* @testAction click click #base
+* @testAction remove click #dismissButton
+* @testAction select toggleTag true
+* @testAction unselect toggleTag false
+* @testQuery selected selected true
+* @testQuery unselected selected false
+* @testQuery disabled disabled true
+* @testQuery !disabled disabled false
+* @testRef base shadow .base
+* @testRef dismissButton shadow .dismiss-button
+*/
+var Tag = class extends require_localized.Localized(require_delegates_aria.DelegatesAria(require_affix.AffixIcon(require_vivid_element.VividElement))) {
+	constructor(..._args) {
+		super(..._args);
+		this.removable = false;
+		this.disabled = false;
+		this.selectable = false;
+		this.selected = false;
+		this.#select = () => {
+			if (!this.selectable || this.disabled) return;
+			this.selected = !this.selected;
+			this.$emit("selected-change");
+		};
+	}
+	/** Removes the Tag from its Tag Group and fires the `removed` event. */
+	remove() {
+		if (!this.removable || this.selectable) return;
+		this.$emit("removed");
+		this.parentElement?.removeChild(this);
+	}
+	#select;
+	/** @internal */
+	handleKeydown(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			this.#select();
+		}
+		if (e.key === "Delete" || e.key === "Backspace") {
+			e.preventDefault();
+			this.remove();
+		}
+		return true;
+	}
+	/** @internal */
+	handleClick() {
+		this.#select();
+	}
 };
+require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "connotation", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "shape", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "label", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "removable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "disabled", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "selectable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "selected", void 0);
+//#endregion
+//#region src/lib/tag/tag.scss?inline
+var tag_default = ".base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}";
 //#endregion
-//#region src/lib/time-picker/definition.ts
+//#region src/lib/tag/tag.template.ts
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${tagConnotation.parse(x.connotation)}`, `appearance-${tagAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-active", "with-disabled", "with-selected", ["disabled", x.disabled], ["selectable", x.selectable], ["selected", x.selectable && x.selected], ["removable", x.removable && !x.selectable], [`shape-${x.shape}`, Boolean(x.shape)]);
+function renderDismissButton(iconTag) {
+	return _microsoft_fast_element.html`
+	<button
+		class="dismiss-button"
+		aria-label="${(x) => x.locale.tag.remove(x.label)}"
+		?disabled="${(x) => x.disabled}"
+		@click="${(x) => x.remove()}">
+		<${iconTag} name="close-line"></${iconTag}>
+	</button>`;
+}
+var tagTemplate = (context) => {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	const iconTag = context.tagFor(require_icon.Icon);
+	const content = _microsoft_fast_element.html`
+		${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
+		${(0, _microsoft_fast_element.when)((x) => x.label, (x) => _microsoft_fast_element.html`<span class="label">${x.label}</span>`)}
+		${(0, _microsoft_fast_element.when)((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${(0, _microsoft_fast_element.when)((x) => x.selectable && x.selected, _microsoft_fast_element.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`)}
+	`;
+	return _microsoft_fast_element.html`
+		${(0, _microsoft_fast_element.when)((x) => x.selectable, _microsoft_fast_element.html`<button
+				class="${getClasses}"
+				${require_delegates_aria.delegateAria({ ariaPressed: (x) => x.selected })}
+				?disabled="${(x) => x.disabled}"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				@click="${(x) => x.handleClick()}"
+			>
+				${content}
+			</button>`)}
+		${(0, _microsoft_fast_element.when)((x) => !x.selectable, _microsoft_fast_element.html`<span
+				class="${getClasses}"
+				${require_delegates_aria.delegateAria()}
+				tabindex="${(x) => x.disabled || x.removable ? null : 0}"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				@click="${(x) => x.handleClick()}"
+			>
+				${content}
+			</span>`)}
+	`;
+};
+//#endregion
+//#region src/lib/tag/definition.ts
 /** @internal */
-var timePickerDefinition = require_vivid_element.defineVividComponent("time-picker", require_time_selection_picker_template.TimePicker, TimePickerTemplate, [
-	require_definition$3.textFieldDefinition,
-	require_definition$1.popupDefinition,
-	require_definition.buttonDefinition,
-	require_time_selection_picker_template.inlineTimePickerDefinition,
-	require_definition$2.visuallyHiddenDefinition
-], {
-	styles: require_picker_field_template.picker_field_default,
+var tagDefinition = require_vivid_element.defineVividComponent("tag", Tag, tagTemplate, [require_definition.iconDefinition], {
+	styles: tag_default,
 	shadowOptions: { delegatesFocus: true }
 });
 /**
-* Registers the time-picker element with the design system.
+* Registers the tag elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTimePicker = require_vivid_element.createRegisterFunction(timePickerDefinition);
+var registerTag = require_vivid_element.createRegisterFunction(tagDefinition);
 //#endregion
-Object.defineProperty(exports, "registerTimePicker", {
+Object.defineProperty(exports, "Tag", {
+	enumerable: true,
+	get: function() {
+		return Tag;
+	}
+});
+Object.defineProperty(exports, "registerTag", {
 	enumerable: true,
 	get: function() {
-		return registerTimePicker;
+		return registerTag;
 	}
 });
-Object.defineProperty(exports, "timePickerDefinition", {
+Object.defineProperty(exports, "tagDefinition", {
 	enumerable: true,
 	get: function() {
-		return timePickerDefinition;
+		return tagDefinition;
 	}
 });

package/unbundled/definition78.js

@@ -1,35 +1,149 @@
-import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
-import { t as buttonDefinition } from "./definition6.js";
-import { t as popupDefinition } from "./definition9.js";
-import { n as visuallyHiddenDefinition } from "./definition22.js";
-import { n as textFieldDefinition } from "./definition26.js";
-import { r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
-import { n as TimePicker, s as inlineTimePickerDefinition, t as TimeSelectionPickerTemplate } from "./time-selection-picker.template.js";
-//#region src/lib/time-picker/time-picker.template.ts
-var TimePickerTemplate = (context) => {
-	return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {
-		withSeparator: true,
-		padded: false
-	});
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
+import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
+import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
+import { t as componentEnum } from "./component-enum.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/tag/tag.ts
+var tagConnotation = componentEnum([
+	"accent",
+	"cta",
+	"success",
+	"alert",
+	"warning",
+	"information",
+	"announcement"
+], "accent");
+var tagAppearance = componentEnum([
+	"subtle",
+	"duotone",
+	"subtle-light"
+], "subtle");
+/**
+* @public
+* @component tag
+* @slot icon - The preferred way to add an icon to the component.
+* @event {CustomEvent<undefined>} selected-change - Fires when the selected state changes
+* @event {CustomEvent<undefined>} removed - Fires when the tag is removed
+* @testSelector byLabel byLabel
+* @testAction click click #base
+* @testAction remove click #dismissButton
+* @testAction select toggleTag true
+* @testAction unselect toggleTag false
+* @testQuery selected selected true
+* @testQuery unselected selected false
+* @testQuery disabled disabled true
+* @testQuery !disabled disabled false
+* @testRef base shadow .base
+* @testRef dismissButton shadow .dismiss-button
+*/
+var Tag = class extends Localized(DelegatesAria(AffixIcon(VividElement))) {
+	constructor(..._args) {
+		super(..._args);
+		this.removable = false;
+		this.disabled = false;
+		this.selectable = false;
+		this.selected = false;
+		this.#select = () => {
+			if (!this.selectable || this.disabled) return;
+			this.selected = !this.selected;
+			this.$emit("selected-change");
+		};
+	}
+	/** Removes the Tag from its Tag Group and fires the `removed` event. */
+	remove() {
+		if (!this.removable || this.selectable) return;
+		this.$emit("removed");
+		this.parentElement?.removeChild(this);
+	}
+	#select;
+	/** @internal */
+	handleKeydown(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			this.#select();
+		}
+		if (e.key === "Delete" || e.key === "Backspace") {
+			e.preventDefault();
+			this.remove();
+		}
+		return true;
+	}
+	/** @internal */
+	handleClick() {
+		this.#select();
+	}
+};
+__decorate([attr], Tag.prototype, "connotation", void 0);
+__decorate([attr], Tag.prototype, "shape", void 0);
+__decorate([attr], Tag.prototype, "appearance", void 0);
+__decorate([attr], Tag.prototype, "label", void 0);
+__decorate([attr({ mode: "boolean" })], Tag.prototype, "removable", void 0);
+__decorate([attr({ mode: "boolean" })], Tag.prototype, "disabled", void 0);
+__decorate([attr({ mode: "boolean" })], Tag.prototype, "selectable", void 0);
+__decorate([attr({ mode: "boolean" })], Tag.prototype, "selected", void 0);
+//#endregion
+//#region src/lib/tag/tag.scss?inline
+var tag_default = ".base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}";
+//#endregion
+//#region src/lib/tag/tag.template.ts
+var getClasses = (x) => classNames("base", `connotation-${tagConnotation.parse(x.connotation)}`, `appearance-${tagAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-active", "with-disabled", "with-selected", ["disabled", x.disabled], ["selectable", x.selectable], ["selected", x.selectable && x.selected], ["removable", x.removable && !x.selectable], [`shape-${x.shape}`, Boolean(x.shape)]);
+function renderDismissButton(iconTag) {
+	return html`
+	<button
+		class="dismiss-button"
+		aria-label="${(x) => x.locale.tag.remove(x.label)}"
+		?disabled="${(x) => x.disabled}"
+		@click="${(x) => x.remove()}">
+		<${iconTag} name="close-line"></${iconTag}>
+	</button>`;
+}
+var tagTemplate = (context) => {
+	const affixIconTemplate = affixIconTemplateFactory(context);
+	const iconTag = context.tagFor(Icon);
+	const content = html`
+		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+		${when((x) => x.label, (x) => html`<span class="label">${x.label}</span>`)}
+		${when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when((x) => x.selectable && x.selected, html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`)}
+	`;
+	return html`
+		${when((x) => x.selectable, html`<button
+				class="${getClasses}"
+				${delegateAria({ ariaPressed: (x) => x.selected })}
+				?disabled="${(x) => x.disabled}"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				@click="${(x) => x.handleClick()}"
+			>
+				${content}
+			</button>`)}
+		${when((x) => !x.selectable, html`<span
+				class="${getClasses}"
+				${delegateAria()}
+				tabindex="${(x) => x.disabled || x.removable ? null : 0}"
+				@keydown="${(x, c) => x.handleKeydown(c.event)}"
+				@click="${(x) => x.handleClick()}"
+			>
+				${content}
+			</span>`)}
+	`;
 };
 //#endregion
-//#region src/lib/time-picker/definition.ts
+//#region src/lib/tag/definition.ts
 /** @internal */
-var timePickerDefinition = defineVividComponent("time-picker", TimePicker, TimePickerTemplate, [
-	textFieldDefinition,
-	popupDefinition,
-	buttonDefinition,
-	inlineTimePickerDefinition,
-	visuallyHiddenDefinition
-], {
-	styles: picker_field_default,
+var tagDefinition = defineVividComponent("tag", Tag, tagTemplate, [iconDefinition], {
+	styles: tag_default,
 	shadowOptions: { delegatesFocus: true }
 });
 /**
-* Registers the time-picker element with the design system.
+* Registers the tag elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTimePicker = createRegisterFunction(timePickerDefinition);
+var registerTag = createRegisterFunction(tagDefinition);
 //#endregion
-export { timePickerDefinition as n, registerTimePicker as t };
+export { tagDefinition as n, Tag as r, registerTag as t };