@ui5/webcomponents 0.0.0-037d08c67

package/dist/ToggleSpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSpinButton.js","sourceRoot":"","sources":["../src/ToggleSpinButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAG/E,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE;;;;;;;;;;;;GAYG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,YAAY;IAA3C;;QACC;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;QAEd;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;QAEd;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;IAoBf,CAAC;IApBc,CAAC;IASf;;OAEG;IACH,QAAQ,KAAI,CAAC;IAEb;;OAEG;IACH,IAAI,gBAAgB;QACnB,OAAO,YAAY,CAAC;IACrB,CAAC;CACD,CAAA;AAlCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,EAAE;mDACQ;AA3Bd,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;QAC5C,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GAEI,gBAAgB,CAwCrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base\";\n\nimport Button from \"./Button.js\";\nimport ToggleButton from \"./ToggleButton.js\";\n\n// Template\nimport ToggleSpinButtonTemplate from \"./ToggleSpinButtonTemplate.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-toggle-spin-button` is explicitly used in the new design of `ui5-time-picker`.\n * It extends `ui5-toggle-button` with some specific accessibility-related properties in order to\n * have spin button look and feel from accessibility point of view. This component should not be used separately.\n * @constructor\n * @extends ToggleButton\n * @since 1.15.0\n * @private\n */\n@customElement({\n\ttag: \"ui5-toggle-spin-button\",\n\trenderer: jsxRenderer,\n\tstyles: [Button.styles, ToggleButton.styles],\n\ttemplate: ToggleSpinButtonTemplate,\n})\n\nclass ToggleSpinButton extends ToggleButton {\n\t/**\n\t * Defines the ARIA valuemin of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueMin = -1;\n\n\t/**\n\t * Defines the ARIA valuemax of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueMax = -1;\n\n\t/**\n\t * Defines the ARIA valuenow of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueNow = -1;;\n\n\t/**\n\t * Defines the ARIA valuetext of the component.\n\t * @default undefined\n\t */\n\t@property()\n\tvalueText?: string;\n\n\t/**\n\t * Override of the handler in order to prevent button toggle functionality\n\t */\n\t_onclick() {}\n\n\t/**\n\t * Override\n\t */\n\tget effectiveAccRole(): AriaRole {\n\t\treturn \"spinbutton\";\n\t}\n}\n\nToggleSpinButton.define();\n\nexport default ToggleSpinButton;\n"]}

package/dist/ToggleSpinButtonTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ToggleSpinButton from "./ToggleSpinButton.js";
+export default function ToggleSpinButtonTemplate(this: ToggleSpinButton): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToggleSpinButtonTemplate.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import buttonTemplate from "./ButtonTemplate.js";
+export default function ToggleSpinButtonTemplate() {
+    return (_jsx(_Fragment, { children: buttonTemplate.call(this, {
+            ariaValueMax: this.valueMax,
+            ariaValueMin: this.valueMin,
+            ariaValueNow: this.valueNow,
+            ariaValueText: this.valueText,
+        }) }));
+}
+//# sourceMappingURL=ToggleSpinButtonTemplate.js.map

package/dist/ToggleSpinButtonTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSpinButtonTemplate.js","sourceRoot":"","sources":["../src/ToggleSpinButtonTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CAAC,4BACL,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE;YAC3B,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,aAAa,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC,GACA,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type ToggleSpinButton from \"./ToggleSpinButton.js\";\nimport buttonTemplate from \"./ButtonTemplate.js\";\n\nexport default function ToggleSpinButtonTemplate(this: ToggleSpinButton) {\n\treturn (<>\n\t\t{ buttonTemplate.call(this, {\n\t\t\tariaValueMax: this.valueMax,\n\t\t\tariaValueMin: this.valueMin,\n\t\t\tariaValueNow: this.valueNow,\n\t\t\tariaValueText: this.valueText,\n\t\t})}\n\t</>);\n}\n"]}

package/dist/Token.d.ts

@@ -0,0 +1,97 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { IIcon } from "./Icon.js";
+import type { IToken } from "./MultiInput.js";
+type TokenDeleteEventDetail = {
+    backSpace?: boolean;
+    delete?: boolean;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Token.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.9
+ * @implements {IToken}
+ * @public
+ */
+declare class Token extends UI5Element implements IToken {
+    eventDetails: {
+        "select": void;
+        "delete": TokenDeleteEventDetail;
+    };
+    /**
+     * Defines the text of the token.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines whether the component is selected or not.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines whether the component is read-only.
+     *
+     * **Note:** A read-only component can not be deleted or selected,
+     * but still provides visual feedback upon user interaction.
+     * @default false
+     * @private
+     */
+    readonly: boolean;
+    /**
+     * Set by the tokenizer when a token is in the "more" area (overflowing)
+     * @default false
+     * @private
+     */
+    overflows: boolean;
+    singleToken: boolean;
+    /**
+     * Defines whether the component is focused or not.
+     * @default false
+     * @private
+     */
+    focused: boolean;
+    /**
+     * Defines whether the token is being deleted
+     * This flag is used in the ui5-multi-combobox
+     * @default false
+     * @private
+     */
+    toBeDeleted: boolean;
+    /**
+     * Defines the tabIndex of the component.
+     * @private
+     */
+    forcedTabIndex: string;
+    /**
+     * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.
+     * Accepts `ui5-icon`.
+     * @public
+     * @since 1.0.0-rc.9
+     */
+    closeIcon: Slot<IIcon>;
+    static i18nBundle: I18nBundle;
+    _handleSelect(): void;
+    _focusin(): void;
+    _focusout(): void;
+    _delete(): void;
+    _onmousedown(e: MouseEvent): void;
+    _keydown(e: KeyboardEvent): void;
+    get tokenDeletableText(): string;
+    get textDom(): Element | null | undefined;
+    get isTruncatable(): boolean;
+    get ariaDescription(): string;
+}
+export default Token;
+export type { TokenDeleteEventDetail };

package/dist/Token.js

@@ -0,0 +1,199 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Token_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isBackSpace, isSpace, isDelete, isSpaceCtrl, } from "@ui5/webcomponents-base/dist/Keys.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL, TOKEN_ARIA_REMOVE } from "./generated/i18n/i18n-defaults.js";
+import TokenTemplate from "./TokenTemplate.js";
+// Styles
+import tokenStyles from "./generated/themes/Token.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Token.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.9
+ * @implements {IToken}
+ * @public
+ */
+let Token = Token_1 = class Token extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the component is selected or not.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        /**
+         * Defines whether the component is read-only.
+         *
+         * **Note:** A read-only component can not be deleted or selected,
+         * but still provides visual feedback upon user interaction.
+         * @default false
+         * @private
+         */
+        this.readonly = false;
+        /**
+         * Set by the tokenizer when a token is in the "more" area (overflowing)
+         * @default false
+         * @private
+         */
+        this.overflows = false;
+        this.singleToken = false;
+        /**
+         * Defines whether the component is focused or not.
+         * @default false
+         * @private
+         */
+        this.focused = false;
+        /**
+         * Defines whether the token is being deleted
+         * This flag is used in the ui5-multi-combobox
+         * @default false
+         * @private
+         */
+        this.toBeDeleted = false;
+        /**
+         * Defines the tabIndex of the component.
+         * @private
+         */
+        this.forcedTabIndex = "-1";
+        // fireMyEvent(name: keyof this["_events"]) {
+        // 	console.log(name);
+        // }
+    }
+    _handleSelect() {
+        if (!this.toBeDeleted) {
+            this.selected = !this.selected;
+            this.fireDecoratorEvent("select");
+        }
+    }
+    _focusin() {
+        this.focused = true;
+    }
+    _focusout() {
+        this.focused = !this.focused;
+    }
+    _delete() {
+        this.toBeDeleted = true;
+        this.fireDecoratorEvent("delete");
+    }
+    _onmousedown(e) {
+        const target = e.currentTarget;
+        if (target === this.shadowRoot?.querySelector("[ui5-icon]")) {
+            this.toBeDeleted = true;
+        }
+    }
+    _keydown(e) {
+        const isBackSpacePressed = isBackSpace(e);
+        const isDeletePressed = isDelete(e);
+        if (!this.readonly && (isBackSpacePressed || isDeletePressed)) {
+            e.preventDefault();
+            this.fireDecoratorEvent("delete", {
+                backSpace: isBackSpacePressed,
+                "delete": isDeletePressed,
+            });
+        }
+        if (isSpace(e) || isSpaceCtrl(e)) {
+            e.preventDefault();
+            this._handleSelect();
+        }
+    }
+    get tokenDeletableText() {
+        return Token_1.i18nBundle.getText(TOKEN_ARIA_REMOVE);
+    }
+    get textDom() {
+        return this.getDomRef()?.querySelector(".ui5-token--text");
+    }
+    get isTruncatable() {
+        if (!this.textDom) {
+            return false;
+        }
+        return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);
+    }
+    get ariaDescription() {
+        let description = Token_1.i18nBundle.getText(TOKEN_ARIA_LABEL);
+        if (!this.readonly) {
+            description += ` ${Token_1.i18nBundle.getText(TOKEN_ARIA_DELETABLE)}`;
+        }
+        return description;
+    }
+};
+__decorate([
+    property()
+], Token.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], Token.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], Token.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], Token.prototype, "overflows", void 0);
+__decorate([
+    property({ type: Boolean })
+], Token.prototype, "singleToken", void 0);
+__decorate([
+    property({ type: Boolean })
+], Token.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], Token.prototype, "toBeDeleted", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Token.prototype, "forcedTabIndex", void 0);
+__decorate([
+    slot()
+], Token.prototype, "closeIcon", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Token, "i18nBundle", void 0);
+Token = Token_1 = __decorate([
+    customElement({
+        tag: "ui5-token",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: TokenTemplate,
+        styles: tokenStyles,
+    })
+    /**
+     * Fired when the the component is selected by user interaction with mouse or by clicking space.
+     * @private
+     */
+    ,
+    event("select", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the backspace, delete or close icon of the token is pressed
+     * @param {Boolean} backSpace Indicates whether token is deleted by backspace key.
+     * @param {Boolean} delete Indicates whether token is deleted by delete key.
+     * @private
+     */
+    ,
+    event("delete", {
+        bubbles: true,
+    })
+], Token);
+Token.define();
+export default Token;
+//# sourceMappingURL=Token.js.map

package/dist/Token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.js","sourceRoot":"","sources":["../src/Token.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisBackSpace,\n\tisSpace,\n\tisDelete,\n\tisSpaceCtrl,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL, TOKEN_ARIA_REMOVE } from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { IIcon } from \"./Icon.js\";\nimport type { IToken } from \"./MultiInput.js\";\nimport TokenTemplate from \"./TokenTemplate.js\";\n\n// Styles\nimport tokenStyles from \"./generated/themes/Token.css.js\";\n\ntype TokenDeleteEventDetail = {\n\tbackSpace?: boolean;\n\tdelete?: boolean;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Token.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.9\n * @implements {IToken}\n * @public\n */\n@customElement({\n\ttag: \"ui5-token\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TokenTemplate,\n\tstyles: tokenStyles,\n})\n/**\n * Fired when the the component is selected by user interaction with mouse or by clicking space.\n * @private\n */\n@event(\"select\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the backspace, delete or close icon of the token is pressed\n * @param {Boolean} backSpace Indicates whether token is deleted by backspace key.\n * @param {Boolean} delete Indicates whether token is deleted by delete key.\n * @private\n */\n@event(\"delete\", {\n\tbubbles: true,\n})\nclass Token extends UI5Element implements IToken {\n\teventDetails!: {\n\t\t\"select\": void\n\t\t\"delete\": TokenDeleteEventDetail\n\t}\n\t/**\n\t * Defines the text of the token.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines whether the component is selected or not.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component can not be deleted or selected,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Set by the tokenizer when a token is in the \"more\" area (overflowing)\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\toverflows = false;\n\n\t@property({ type: Boolean })\n\tsingleToken = false;\n\n\t/**\n\t * Defines whether the component is focused or not.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines whether the token is being deleted\n\t * This flag is used in the ui5-multi-combobox\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ttoBeDeleted = false;\n\n\t/**\n\t * Defines the tabIndex of the component.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\n\t * Accepts `ui5-icon`.\n\t * @public\n\t * @since 1.0.0-rc.9\n\t */\n\t@slot()\n\tcloseIcon!: Slot<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleSelect() {\n\t\tif (!this.toBeDeleted) {\n\t\t\tthis.selected = !this.selected;\n\t\t\tthis.fireDecoratorEvent(\"select\");\n\t\t}\n\t}\n\n\t_focusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_focusout() {\n\t\tthis.focused = !this.focused;\n\t}\n\n\t_delete() {\n\t\tthis.toBeDeleted = true;\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tconst target = e.currentTarget as HTMLElement;\n\n\t\tif (target === this.shadowRoot?.querySelector(\"[ui5-icon]\")) {\n\t\t\tthis.toBeDeleted = true;\n\t\t}\n\t}\n\n\t_keydown(e: KeyboardEvent) {\n\t\tconst isBackSpacePressed = isBackSpace(e);\n\t\tconst isDeletePressed = isDelete(e);\n\n\t\tif (!this.readonly && (isBackSpacePressed || isDeletePressed)) {\n\t\t\te.preventDefault();\n\n\t\t\tthis.fireDecoratorEvent(\"delete\", {\n\t\t\t\tbackSpace: isBackSpacePressed,\n\t\t\t\t\"delete\": isDeletePressed,\n\t\t\t});\n\t\t}\n\n\t\tif (isSpace(e) || isSpaceCtrl(e)) {\n\t\t\te.preventDefault();\n\n\t\t\tthis._handleSelect();\n\t\t}\n\t}\n\n\tget tokenDeletableText() {\n\t\treturn Token.i18nBundle.getText(TOKEN_ARIA_REMOVE);\n\t}\n\n\tget textDom() {\n\t\treturn this.getDomRef()?.querySelector(\".ui5-token--text\");\n\t}\n\n\tget isTruncatable() {\n\t\tif (!this.textDom) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);\n\t}\n\n\tget ariaDescription() {\n\t\tlet description = Token.i18nBundle.getText(TOKEN_ARIA_LABEL);\n\n\t\tif (!this.readonly) {\n\t\t\tdescription += ` ${Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE)}`;\n\t\t}\n\n\t\treturn description;\n\t}\n\n\t// fireMyEvent(name: keyof this[\"_events\"]) {\n\t// \tconsole.log(name);\n\t// }\n}\n\nToken.define();\n\nexport default Token;\nexport type { TokenDeleteEventDetail };\n"]}

package/dist/TokenTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Token from "./Token.js";
+export default function TokenTemplate(this: Token): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TokenTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+export default function TokenTemplate() {
+    return (_jsxs("div", { role: "option", tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : -1, class: "ui5-token--wrapper", "aria-description": this.ariaDescription, "aria-selected": this.selected, onClick: this._handleSelect, onFocusIn: this._focusin, onFocusOut: this._focusout, onKeyDown: this._keydown, children: [_jsx("span", { class: "ui5-token--text", children: this.text }), !this.readonly &&
+                _jsx("div", { class: "ui5-token--icon", children: this.closeIcon.length > 0 ?
+                        _jsx("slot", { name: "closeIcon", onClick: this._delete })
+                        :
+                            _jsx(Icon, { name: decline, mode: "Decorative", accessibleName: this.tokenDeletableText, showTooltip: true, onClick: this._delete, onMouseDown: this._onmousedown }) })] }));
+}
+//# sourceMappingURL=TokenTemplate.js.map

package/dist/TokenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenTemplate.js","sourceRoot":"","sources":["../src/TokenTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAE/D,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CACN,eACC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAClE,KAAK,EAAC,oBAAoB,sBACR,IAAI,CAAC,eAAe,mBACvB,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,UAAU,EAAE,IAAI,CAAC,SAAS,EAC1B,SAAS,EAAE,IAAI,CAAC,QAAQ,aAExB,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,IAAI,GAAQ,EAE/C,CAAC,IAAI,CAAC,QAAQ;gBACd,cAAK,KAAK,EAAC,iBAAiB,YAC1B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;wBAC3B,eAAM,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAS;wBACrD,CAAC;4BACD,KAAC,IAAI,IACJ,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,YAAY,EACjB,cAAc,EAAE,IAAI,CAAC,kBAAkB,EACvC,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,YAAY,GAC7B,GAEE,IAEF,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Token from \"./Token.js\";\nimport Icon from \"./Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function TokenTemplate(this: Token) {\n\treturn (\n\t\t<div\n\t\t\trole=\"option\"\n\t\t\ttabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : -1}\n\t\t\tclass=\"ui5-token--wrapper\"\n\t\t\taria-description={this.ariaDescription}\n\t\t\taria-selected={this.selected}\n\t\t\tonClick={this._handleSelect}\n\t\t\tonFocusIn={this._focusin}\n\t\t\tonFocusOut={this._focusout}\n\t\t\tonKeyDown={this._keydown}\n\t\t>\n\t\t\t<span class=\"ui5-token--text\">{this.text}</span>\n\n\t\t\t{!this.readonly &&\n\t\t\t\t<div class=\"ui5-token--icon\">\n\t\t\t\t\t{this.closeIcon.length > 0 ?\n\t\t\t\t\t\t<slot name=\"closeIcon\" onClick={this._delete}></slot>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\tmode=\"Decorative\"\n\t\t\t\t\t\t\taccessibleName={this.tokenDeletableText}\n\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\tonClick={this._delete}\n\t\t\t\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}