@limetech/lime-crm-building-blocks 1.95.0 → 1.97.0

package/dist/components/limebb-percentage-visualizer.js

@@ -76,11 +76,11 @@ const PercentageVisualizer = /*@__PURE__*/ proxyCustomElement(class PercentageVi
     render() {
         const normalizedValue = this.getNormalizedValue();
         const zeroPoint = this.getZeroPointPosition();
-        return (h(Host, { key: 'b9876aea271ead3ed18a7fdc59d652b541aed30a', class: this.getContainerClassList(), style: {
+        return (h(Host, { key: 'a99a367379f75613f8f37824fae64d5425e13c92', class: this.getContainerClassList(), style: {
                 '--limebb-percentage-visualizer-zero-point-position': `${zeroPoint}%`,
                 '--limebb-percentage-visualizer-width': `${Math.abs(normalizedValue)}%`,
                 '--limebb-percentage-visualizer-rotate': `${normalizedValue >= 0 ? '0deg' : '180deg'}`,
-            } }, h("limel-notched-outline", { key: '64bea0a1e95c001494e8ecee42b6061c6d6c007c', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: 'd1dc81b554828d9998ad6c1567c49c56a005b547', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
+            } }, h("limel-notched-outline", { key: '498c23ad0ddd79219de646286f9958a84c2592c9', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: 'f8ba78a9b92bb93fc107e04f3001413c7560431b', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

package/dist/components/limebb-property-selector.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbPropertySelector extends Components.LimebbPropertySelector, HTMLElement {}
+export const LimebbPropertySelector: {
+    prototype: LimebbPropertySelector;
+    new (): LimebbPropertySelector;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/limebb-property-selector.js

@@ -0,0 +1,6 @@
+import { P as PropertySelector, d as defineCustomElement$1 } from './property-selector.js';
+
+const LimebbPropertySelector = PropertySelector;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbPropertySelector, defineCustomElement };

package/dist/components/limebb-response-format-editor.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbResponseFormatEditor extends Components.LimebbResponseFormatEditor, HTMLElement {}
+export const LimebbResponseFormatEditor: {
+    prototype: LimebbResponseFormatEditor;
+    new (): LimebbResponseFormatEditor;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/limebb-response-format-editor.js

@@ -0,0 +1,6 @@
+import { R as ResponseFormatEditor, d as defineCustomElement$1 } from './response-format-editor.js';
+
+const LimebbResponseFormatEditor = ResponseFormatEditor;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbResponseFormatEditor, defineCustomElement };

package/dist/components/limebb-response-format-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbResponseFormatItem extends Components.LimebbResponseFormatItem, HTMLElement {}
+export const LimebbResponseFormatItem: {
+    prototype: LimebbResponseFormatItem;
+    new (): LimebbResponseFormatItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/limebb-response-format-item.js

@@ -0,0 +1,6 @@
+import { R as ResponseFormatItem, d as defineCustomElement$1 } from './response-format-item.js';
+
+const LimebbResponseFormatItem = ResponseFormatItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbResponseFormatItem, defineCustomElement };

package/dist/components/limebb-text-editor.js

@@ -1,13 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { D as De, M as Me, c, W as We, H as He, T as Te } from './index.esm.js';
+import { c, W as We, H as He, T as Te } from './index.esm.js';
 import { A as ARROW_DOWN, a as ESCAPE, b as ARROW_UP, E as ENTER, T as TAB } from './keycodes.js';
-import { d as defineProperty, b as arrayLikeKeys, k as keys, c as getSymbols, s as stubArray, a as arrayPush, e as baseGetAllKeys, U as Uint8Array, S as Stack, g as getAllKeys } from './_Uint8Array.js';
-import { i as isSymbol, e as eq } from './_MapCache.js';
+import { b as arrayLikeKeys, k as keys, c as getSymbols, s as stubArray, a as arrayPush, d as baseGetAllKeys, U as Uint8Array, S as Stack, g as getAllKeys } from './_Uint8Array.js';
+import { d as defineProperty } from './_defineProperty.js';
+import { e as eq } from './_MapCache.js';
 import { d as isObject, r as root, S as Symbol, a as isObjectLike, i as isArray } from './_Map.js';
 import { d as isPrototype, i as isArrayLike, o as overArg, g as getTag, h as baseUnary, n as nodeUtil, a as isBuffer } from './_getTag.js';
+import { c as createRandomString } from './random-string.js';
+import { h as hasLabel, a as hasHasManyRelation, b as getRelationProperty } from './limetype.js';
 import { i as isNonNull } from './non-null.js';
 import { d as defineCustomElement$3 } from './empty-state.js';
 import { d as defineCustomElement$2 } from './text-editor-picker.js';
+import { i as isSymbol } from './isSymbol.js';
 
 /** Used to match a single whitespace character. */
 var reWhitespace = /\s/;
@@ -1093,71 +1097,6 @@ function getUpdatedItems(items, highlightedItemIndex) {
     });
 }
 
-/* eslint-disable sonarjs/pseudo-random */
-const createRandomString = () => {
-    var _a;
-    if (!('crypto' in window) ||
-        typeof ((_a = window.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) !== 'function') {
-        return legacyCreateRandomString();
-    }
-    return 'a_' + crypto.randomUUID(); // ids must start with letters
-};
-function legacyCreateRandomString() {
-    const USE_HEX = 36;
-    const SKIP_LEADING_ZERODOT = 2;
-    const ASCII_A = 97;
-    const NUMBER_OF_LETTERS = 26;
-    return (String.fromCodePoint(ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)) +
-        Math.random()
-            .toString(USE_HEX)
-            .slice(Math.max(0, SKIP_LEADING_ZERODOT)) +
-        Math.random().toString(USE_HEX).slice(Math.max(0, SKIP_LEADING_ZERODOT)));
-}
-
-/**
- * Whether the given object has the given label or not.
- *
- * @param object the object to check label for
- * @param label the label to check for
- * @returns true if the object has the label
- */
-function hasLabel(object, label) {
-    return object.label === label;
-}
-/**
- * Whether the given property is a hasmany relation or not.
- *
- * @param property the property to check
- * @returns true if the property is a hasmany relation
- */
-function isManyRelation(property) {
-    return De(property) && !Me(property);
-}
-/**
- * Finds a relation property on the given limetype that is related to a
- * limetype with the given label.
- *
- * @param limetype the limetype to search for the relation property
- * @param label the label of the target limetype to match
- * @returns the relation property or undefined
- */
-function getRelationProperty(limetype, label) {
-    return Object.values(limetype.properties).find((property) => property &&
-        property.relation &&
-        hasLabel(property.relation.getLimetype(), label));
-}
-/**
- * Whether the limetype has a hasmany relation of a limetype with the given label
- *
- * @param limetype the limetype
- * @param relatedLabel the label of the related limetype
- * @returns true if the limetype has the hasmany relation
- */
-function hasHasManyRelation(limetype, relatedLabel) {
-    const property = getRelationProperty(limetype, relatedLabel);
-    return !!property && isManyRelation(property);
-}
-
 /**
  * Get the limetypes that should be available for mentions
  *
@@ -1835,7 +1774,7 @@ const LimeBBTextEditor = /*@__PURE__*/ proxyCustomElement(class LimeBBTextEditor
     }
     render() {
         return [
-            h("limel-text-editor", { key: 'f2f48910b31ecf37bc6e41245f3e6e6a70b87695', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
+            h("limel-text-editor", { key: 'de672970cfd1048cc232eeadd527153421f28f36', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
             this.renderPicker(),
         ];
     }

package/dist/components/limebb-trend-indicator.js

@@ -37,7 +37,7 @@ const TrendIndicator = /*@__PURE__*/ proxyCustomElement(class TrendIndicator ext
         this.numValue = this.parseValue(this.value);
     }
     render() {
-        return (h(Host, { key: 'e3f051b38577e06c5b31fe18558747e9476ca7bd', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '2d7eed12e714dcbdd4d7fa366c7ab5079d0e0c79', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '13f6acd297b66716dca8581d99fb129fb1dec035', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
+        return (h(Host, { key: 'a0f458a114e5698f40899c44d532643f50bef249', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'fe9a66d44f3155d6594da5e7e16ce9a33907f800', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: 'daff3b1e6ec7098e7353bca3664179fd9c2594c1', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

package/dist/components/limetype-field.js

@@ -0,0 +1,184 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c } from './index.esm.js';
+import { g as getIcon } from './limetype.js';
+import { i as isNonNull } from './non-null.js';
+import { i as isEqual } from './isEqual.js';
+import { i as isArray, a as isObjectLike, b as baseGetTag } from './_Map.js';
+
+/** `Object#toString` result references. */
+var stringTag = '[object String]';
+
+/**
+ * Checks if `value` is classified as a `String` primitive or object.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a string, else `false`.
+ * @example
+ *
+ * _.isString('abc');
+ * // => true
+ *
+ * _.isString(1);
+ * // => false
+ */
+function isString(value) {
+  return typeof value == 'string' ||
+    (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
+}
+
+const RELATION_PROPERTY_TYPES = [
+    'belongsto',
+    'hasone',
+    'hasmany',
+    'hasandbelongstomany',
+];
+const DEFAULT_ALLOWED_PROPERTY_TYPES = [
+    'string',
+    'text',
+    'phone',
+    'integer',
+    'decimal',
+    'percent',
+    'time',
+    'date',
+    'year',
+    'quarter',
+    'month',
+    'yesno',
+    'link',
+    'user',
+    'xml',
+    'option',
+    'set',
+    'file',
+    'system',
+];
+
+const allNonSystemPropertyTypes = DEFAULT_ALLOWED_PROPERTY_TYPES.filter((propertyType) => propertyType !== 'system');
+allNonSystemPropertyTypes.push(...RELATION_PROPERTY_TYPES);
+const LimetypeField = /*@__PURE__*/ proxyCustomElement(class LimetypeField extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.change = createEvent(this, "change", 7);
+        /**
+         * A list of property fields that should be updated when the selected limetype changes.
+         */
+        this.propertyFields = [];
+        /**
+         * The name of this field. May be used as reference when a property mapping
+         * depends on the selected limetype.
+         */
+        this.fieldName = 'limetype';
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            let selectedLimetype = '';
+            if (event.detail && 'value' in event.detail) {
+                selectedLimetype = event.detail.value;
+            }
+            this.change.emit(selectedLimetype || undefined);
+        };
+    }
+    componentWillLoad() {
+        const language = this.platform
+            .get(c.Application)
+            .getLanguage();
+        this.collator = new Intl.Collator(language, {
+            numeric: true,
+            sensitivity: 'base',
+        });
+    }
+    componentShouldUpdate(newValue, oldValue, property) {
+        var _a, _b;
+        return (property !== 'formInfo' ||
+            !isEqual((_a = newValue === null || newValue === void 0 ? void 0 : newValue.schema) === null || _a === void 0 ? void 0 : _a.oneOf, (_b = oldValue === null || oldValue === void 0 ? void 0 : oldValue.schema) === null || _b === void 0 ? void 0 : _b.oneOf));
+    }
+    render() {
+        var _a;
+        const options = this.getLimeTypes().map(limeTypeToOption);
+        options.sort((a, b) => this.collator.compare(a.text, b.text));
+        let selectedOption = options.find((option) => option.value === this.value);
+        let invalid = this.invalid;
+        if (this.value && !selectedOption) {
+            invalid = true;
+            options.unshift({
+                text: ((_a = this.limeTypeRepository.getLimeType(this.value)) === null || _a === void 0 ? void 0 : _a.localname.singular) || this.value,
+                value: this.value,
+            });
+            selectedOption = options[0];
+        }
+        const emptyOption = {
+            text: '',
+            value: '',
+        };
+        options.unshift(emptyOption);
+        return (h("limel-select", { key: '82ce4b92e4ff1285e259f07a35634df722f5baab', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
+    }
+    componentWillRender() {
+        this.updatePropertyFields(this.value || '');
+    }
+    getLimeTypes() {
+        var _a, _b;
+        let limetypes = this.limetypes;
+        if ((_b = (_a = this.formInfo) === null || _a === void 0 ? void 0 : _a.schema) === null || _b === void 0 ? void 0 : _b.oneOf) {
+            limetypes = this.formInfo.schema.oneOf
+                .map((choice) => choice.const)
+                .filter(isString);
+        }
+        if (!limetypes) {
+            return this.limeTypeRepository.getLimeTypes();
+        }
+        return limetypes
+            .map((limetype) => this.limeTypeRepository.getLimeType(limetype))
+            .filter(isNonNull);
+    }
+    updatePropertyFields(selectedLimetype) {
+        for (const field of this.propertyFields) {
+            field.limetype = selectedLimetype;
+            if (field.allowedPropertyTypes === DEFAULT_ALLOWED_PROPERTY_TYPES) {
+                field.allowedPropertyTypes = allNonSystemPropertyTypes;
+            }
+        }
+    }
+    get limeTypeRepository() {
+        return this.platform.get(c.LimeTypeRepository);
+    }
+}, [0, "limebb-limetype-field", {
+        "platform": [16],
+        "context": [16],
+        "label": [513],
+        "required": [516],
+        "readonly": [516],
+        "disabled": [516],
+        "value": [513],
+        "helperText": [513, "helper-text"],
+        "invalid": [4],
+        "limetypes": [16],
+        "propertyFields": [16],
+        "fieldName": [1, "field-name"],
+        "formInfo": [16]
+    }]);
+const limeTypeToOption = (limetype) => ({
+    text: limetype.localname.singular,
+    value: limetype.name,
+    icon: getIcon(limetype),
+});
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-limetype-field"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-limetype-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LimetypeField);
+            }
+            break;
+    } });
+}
+
+export { LimetypeField as L, defineCustomElement as d };

package/dist/components/limetype.js

@@ -0,0 +1,85 @@
+import { D as De, M as Me } from './index.esm.js';
+
+/**
+ * Get the color for a limetype from its UI configuration
+ *
+ * @param limetype the limetype
+ * @returns the color string (CSS variable or RGB)
+ */
+function getColor(limetype) {
+    var _a;
+    const limetypeWithUI = limetype;
+    const color = ((_a = limetypeWithUI === null || limetypeWithUI === void 0 ? void 0 : limetypeWithUI.ui) === null || _a === void 0 ? void 0 : _a.color) || 'rgb(var(--color-gray-default))';
+    return getLimeColor(color);
+}
+/**
+ * Convert lime color references to CSS variables
+ *
+ * @param color the color string
+ * @returns CSS-ready color string
+ */
+function getLimeColor(color) {
+    if (color.startsWith('lime-')) {
+        return `var(--${color})`;
+    }
+    return color;
+}
+/**
+ * Get the icon configuration for a limetype
+ *
+ * @param limetype the limetype
+ * @returns Icon object with name and color
+ */
+function getIcon(limetype) {
+    var _a;
+    const limetypeWithUI = limetype;
+    return {
+        name: ((_a = limetypeWithUI === null || limetypeWithUI === void 0 ? void 0 : limetypeWithUI.ui) === null || _a === void 0 ? void 0 : _a.icon) || 'decision',
+        color: getColor(limetype),
+    };
+}
+/**
+ * Whether the given object has the given label or not.
+ *
+ * @param object the object to check label for
+ * @param label the label to check for
+ * @returns true if the object has the label
+ */
+function hasLabel(object, label) {
+    return object.label === label;
+}
+/**
+ * Whether the given property is a hasmany relation or not.
+ *
+ * @param property the property to check
+ * @returns true if the property is a hasmany relation
+ */
+function isManyRelation(property) {
+    return De(property) && !Me(property);
+}
+/**
+ * Finds a relation property on the given limetype that is related to a
+ * limetype with the given label.
+ *
+ * @param limetype the limetype to search for the relation property
+ * @param label the label of the target limetype to match
+ * @returns the relation property or undefined
+ */
+function getRelationProperty(limetype, label) {
+    return Object.values(limetype.properties).find((property) => property &&
+        property.relation &&
+        hasLabel(property.relation.getLimetype(), label));
+}
+/**
+ * Whether the limetype has a hasmany relation of a limetype with the given label
+ *
+ * @param limetype the limetype
+ * @param relatedLabel the label of the related limetype
+ * @returns true if the limetype has the hasmany relation
+ */
+function hasHasManyRelation(limetype, relatedLabel) {
+    const property = getRelationProperty(limetype, relatedLabel);
+    return !!property && isManyRelation(property);
+}
+
+export { hasHasManyRelation as a, getRelationProperty as b, getIcon as g, hasLabel as h };

package/dist/components/live-docs-info.js

@@ -11,8 +11,8 @@ const LiveDocsInfo = /*@__PURE__*/ proxyCustomElement(class LiveDocsInfo extends
     }
     render() {
         return [
-            h("div", { key: 'afca6783253565c24917f26fa037d47555cc79ee', class: "header" }, h("limel-icon", { key: 'e3119195e169a5c1b5534985d92537f4bd71036c', name: "not_showing_video_frames" }), h("h2", { key: 'a00ac4d1cccf23e00975d0f95f423b3179170d1f' }, "Viewing this file type requires ", h("em", { key: 'cd66615d34d92b74943d0d87c796ac5d14f3f314' }, "Live Docs"))),
-            h("p", { key: '39d0f82f29ec687cfd209b9c32c36b3be08b23aa' }, h("em", { key: 'aea7387f90684dc1571434530708971800a09d49' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: 'a254ad58b3d56386bae9e3ef4113b8d6c70a236e', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
+            h("div", { key: '98c48e74c9cade3b2da713618d585dd8f80e3116', class: "header" }, h("limel-icon", { key: 'b8f56066533f64842a25a324c2794914700c2e8a', name: "not_showing_video_frames" }), h("h2", { key: 'c1e8c722d1fc7d22a85f348a66094ffd8c5a5dd3' }, "Viewing this file type requires ", h("em", { key: '8aca798b2cf1bfe81be5142496e693f57efea8b1' }, "Live Docs"))),
+            h("p", { key: '3934d0c93f6c4b6524643c2ecadd0f3f0f925b09' }, h("em", { key: '1d3b811bf94ba19644231e77434442f9f1ade8f6' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: '023c16b0cfc5b57d750c9a344690fcce51350100', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
         ];
     }
     static get style() { return LimebbLiveDocsInfoStyle0; }

package/dist/components/notification-item.js

@@ -58,7 +58,7 @@ const NotificationListItem = /*@__PURE__*/ proxyCustomElement(class Notification
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'db6570da8224ed4be6e67b0c876f67a74dd226b7', id: this.item.id, class: {
+        return (h(Host, { key: 'e51a5ebe9c955d43f1025a61a12ca870abb66347', id: this.item.id, class: {
                 'is-clickable': this.isItemClickable(),
                 'is-read': !!((_a = this.item) === null || _a === void 0 ? void 0 : _a.read),
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),