@yoobic/yobi 8.2.0-2 → 8.2.0-22

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.js

@@ -110,9 +110,7 @@ export class YooFormAutocompleteDialogComponent {
     if (this.gridExpandedOnLoad) {
       this.gridIsExpanded = true;
     }
-    if (this.isLocal) {
-      this.onValueChanged();
-    }
+    this.onValueChanged();
   }
   componentDidLoad() {
     if (isNativeMobile()) {
@@ -355,7 +353,7 @@ export class YooFormAutocompleteDialogComponent {
         h("yoo-items", { slot: "start" },
           h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() },
             h("yoo-icon", { name: "close", color: "text-color" }))),
-        h("yoo-truncate", { onClick: () => this.onHeaderClick() }, this.initialLoadComplete && this.getDialogTitle()),
+        h("yoo-truncated-line", { onClick: () => this.onHeaderClick(), content: this.initialLoadComplete && this.getDialogTitle() }),
         h("yoo-items", { slot: "end", onClick: (ev) => this.onSave(ev) }, this.multiple && (h("yoo-button", { color: "app-color", fill: "transparent", animated: false }, translate('YOOBICDONE')))))));
   }
   renderExpandedGrid() {
@@ -476,7 +474,7 @@ export class YooFormAutocompleteDialogComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

package/dist/collection/components/form/form-calendar-dialog/form-calendar-dialog.js

@@ -47,7 +47,7 @@ export class YooFormCalendarDialogComponent {
                 h("yoo-icon", { name: "close", color: "stable" }))),
             h("yoo-truncate", null, translate('SELECTDATE')),
             h("yoo-items", { slot: "end" },
-              h("yoo-button", { color: "app-color", fill: "transparent", "ripple-type": "unbounded", onClick: (ev) => this.onTodayClicked(ev) }, translate('TODAY')))))),
+              h("yoo-button", { color: "app-color", fill: "transparent", "ripple-type": "unbounded", onClick: (ev) => this.onTodayClicked(ev) }, translate('YOOBICTODAY')))))),
       h("yoo-ion-content", null,
         h("yoo-calendar", { ref: (el) => (this.calendarHTMLElement = el), class: "calendar-picker datetime", isDatePicker: true, activeDay: this.value, onDateChanged: (ev) => { var _a; return this.onDateChanged(ev, (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.date); } }),
         h("yoo-form-time", { type: "datetime", value: this.value, onInputChanged: (ev) => this.onDateChanged(ev, ev.detail, true), onAmPmToggled: (ev) => this.onAmPmToggled(ev), onValidityChanged: (ev) => ev.stopPropagation() })),

package/dist/collection/components/form/form-capture/form-capture.css

@@ -260,6 +260,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .progressbar-wrapper .main-wrapper {
   height: var(--spacing-32, 2rem);
 }
+:host .outer-container .progressbar-wrapper .main-wrapper yoo-progress-bar {
+  --progress-bar-color: var(--app-color, #5a30f4);
+}
 :host .outer-container .camera-container {
   position: relative;
   width: var(--camera-container-height, 6.125rem);

package/dist/collection/components/form/form-capture/form-capture.js

@@ -1,7 +1,7 @@
 import { StatusBar } from '@capacitor/status-bar';
 import { MediaType, PictureSourceType } from '@ionic-native/camera';
 import { MediaCapture } from '@ionic-native/media-capture';
-import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isCloudinaryLink, isFile, isGif, isImage, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, moveToImageDirectory, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
+import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isCloudinaryLink, isFile, isGif, isImage, isImageUrl, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, moveToImageDirectory, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
 import { Build, Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { assign, assignInWith, clone, compact, intersection, isArray, isNumber, isUndefined, keys } from 'lodash-es';
 import { getPicture, getVideo, getVideoDevices, importMultipleFromLibrary, showAudioRecorder } from '../../../utils/helpers/camera-helpers';
@@ -1166,7 +1166,7 @@ export class YooFormCaptureComponent {
           return file;
         },
         (file) => {
-          if (isImage(file)) {
+          if (isImage(file) && !isImageUrl(file)) {
             return read(file, 'blob');
           }
           else if (isAudio(file) && !isNativeMobile()) {
@@ -1563,7 +1563,7 @@ export class YooFormCaptureComponent {
       ? [
         this.currentUploadingStatus && (isUndefined(index) || !this.multiple) && h("div", { class: "text app-color" }, this.currentUploadingStatus),
         !this.isUploadingPhoto && (h("div", { class: "main-wrapper" },
-          h("yoo-progress-bar", { class: "app-color", value: 100, hideProgressValue: true, listenToProgress: true, listenToCompleteProgress: true, disableBackProgressAnimation: true, progressAnimationDuration: this.progressTime, onValueChanged: (ev) => onProgressUpdating(ev), onProgressFinished: (ev) => onProgressFinished(ev), ref: (el) => (this.progressBarMainRef = el) })))
+          h("yoo-progress-bar", { value: 100, hideProgressValue: true, listenToProgress: true, listenToCompleteProgress: true, disableBackProgressAnimation: true, progressAnimationDuration: this.progressTime, onValueChanged: (ev) => onProgressUpdating(ev), onProgressFinished: (ev) => onProgressFinished(ev), ref: (el) => (this.progressBarMainRef = el) })))
       ]
       : [
         h("yoo-progress-bar", { class: "photo-progress app-color", value: 0, hideProgressValue: true, progressAnimationDuration: 0.5, ref: (el) => {

package/dist/collection/components/form/form-carousel/form-carousel.css

@@ -365,6 +365,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.video) .media-container {
   min-height: var(--media-min-height);
+  margin: var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0 0;
+  padding: 0;
   background: var(--dark, #000000);
 }
 :host(.video) yoo-videoplayer-videojs {

package/dist/collection/components/form/form-carousel/form-carousel.js

@@ -435,8 +435,8 @@ export class YooFormCarouselComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'photo' | 'video' | 'audio' | 'document'",
+        "resolved": "\"audio\" | \"document\" | \"photo\" | \"video\"",
         "references": {}
       },
       "required": false,

package/dist/collection/components/form/form-catalog/form-catalog.js

@@ -285,7 +285,7 @@ export class YooFormCatalogComponent {
               h("div", { class: "title" },
                 translate('QUANTITY'),
                 ": "),
-              readonly ? (quantity) : (h("yoo-form-number-picker", { key: ref, min: 0, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
+              readonly ? (quantity) : (h("yoo-form-number-picker", { key: ref, min: 1, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
                   ev.stopPropagation();
                   if (isNumber(ev.detail)) {
                     this.setProduct(product, ev.detail);
@@ -304,7 +304,7 @@ export class YooFormCatalogComponent {
   }
   renderEditable() {
     return (h("div", { class: "outer-container" },
-      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, value: this.selectedProducts, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
+      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, keepSelection: false, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
       !this.disableScanner && h("div", { class: "or" }, translate('YOOBICOR')),
       !this.disableScanner && h("yoo-form-barcode", { onInputChanged: (ev) => this.onScanned(ev), placeholder: translate('SCANPRODUCTTOBASKET'), hideValue: true }),
       !this.selectorMode && this.notFoundError ? h("div", { class: "error", innerHTML: this.notFoundError }) : null,

package/dist/collection/components/form/form-categorize-words/form-categorize-words.js

@@ -97,6 +97,7 @@ export class YooFormCategorizeWordsComponent {
   }
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
+    showWarningAlert(this.host, hasDuplicates(this.values));
   }
   renderTagsZone() {
     return h("section", { class: "tags" },
@@ -120,7 +121,8 @@ export class YooFormCategorizeWordsComponent {
       h("div", { class: "dropzone", id: `zone-${zoneIndex}` })));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null);
+    return this.livePreview && h("yoo-banner", null,
+      h("p", { slot: "content" }));
   }
   render() {
     return (h(Host, { class: { ...getAppContext(this.host) } },

package/dist/collection/components/form/form-choice/button/form-choice-button.css

@@ -0,0 +1,335 @@
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* Z-Index (Ionic)
+--------------------------------------------------
+Grouped by elements which would be siblings */
+/* Hairlines width */
+/* Default Colors
+---------------------------------- */
+/* Private color variables */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff;*/
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* Color map should provide
+- base: main color to be used.
+- contrast: Color that will provide readable text against the base color
+- shade: 12% darker version of the base color (mix with black)
+- tint: 10% lighter version of the base color (mix with white) */
+/* Themed Colors
+
+ Default Foreground and Background Colors values
+ Allows users to override an foreground / background colors
+ $background-color-value:            $light !default;
+ $background-color-rgb:              255, 255, 255 !default; */
+/* Default Foreground and Background Colors
+-------------------------------------------------- */
+/* Default General Colors
+-------------------------------------------------- */
+/* Default List & List Items
+-------------------------------------------------- */
+/* Item Divider */
+/* iOS List & List Items
+-------------------------------------------------- */
+/* Default Toolbar
+--------------------------------------------------*/
+/* iOS Toolbar
+--------------------------------------------------*/
+/* Default Tabs & Tab bar
+--------------------------------------------------*/
+/* iOS Tabs & Tab bar
+--------------------------------------------------*/
+/* Function related variables
+--------------------------------------------------*/
+/* Gets the active color's css variable from a variation. Alpha is optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+current-color(base) => var(--ion-color-base)
+current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+--------------------------------------------------------------------------------------------*/
+/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+--------------------------------------------------------------------------------------------*/
+/* Mixes a color with black to create its shade.
+--------------------------------------------------------------------------------------------*/
+/*Mixes a color with white to create its tint.
+--------------------------------------------------------------------------------------------*/
+/* Converts a color to a comma separated rgb.
+--------------------------------------------------------------------------------------------*/
+/* Str functions.
+___________________________________________________________________________________________*/
+/* Creates a pulse animation.
+  @param {color} $begin-color [stable-20] - starting color for pulse.
+  @param {color} $end-color [stable-20] - ending color for pulse.
+  @author Ben Morgan
+  @author Damien Arondel 
+*/
+/* Execute a content if the hover state is supported.
+
+ @content the content to execute if relevant
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Properly hide overflow on rounded corner elements for Webkit based browsers.
+ This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
+
+ @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate every overflown elements with an ellipsis.
+ This mixin does not work with flex box on the same level.
+
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate text at a specific number of lines.
+ */
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
+/* Single side border-radius */
+/* Text Direction - ltr / rtl
+$app-direction: multi | rtl | ltr | null (default)
+multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
+rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
+ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
+null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
+---------------------------------------------------------- */
+/* Add property horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add property for all directions
+  @param {string} $prop
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+  @param {boolean} $content include content or use default
+----------------------------------------------------------*/
+/* Add margin for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add padding for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/*Font smoothing
+--------------------------------------------------*/
+/* SVG Background Image Mixin
+  @param {string} $svg
+----------------------------------------------------------*/
+/* Add padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add margin horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add safe area padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add border radius for all directions
+  @param {string} $top-start
+  @param {string} $top-end
+  @param {string} $bottom-end
+  @param {string} $bottom-start
+----------------------------------------------------------*/
+/* Sets correct text align with support for old browsers
+  @param {string} $direction - text direction
+  @param {string} $decorator - !important
+----------------------------------------------------------*/
+/* Add position for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add position horizontal
+  @param {string} $start - amount to position start
+  @param {string} $end - amount to left: 0; end
+----------------------------------------------------------*/
+/**
+ * NOTE DO NOT USE FOR NEW COMPONENTS
+ * LEGACY CODE -- Styles maintained only to prevent breaking changes
+ * For all Font Sizes please use the appropreate font-size-XX Variables.
+ */
+/**
+* Global style mixin for being able to change the background / font-color and border-color
+* programmatically using global classes
+*/
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+:host([readonly]) {
+  padding: 0.5rem 0.5rem 0 0;
+  justify-content: flex-start;
+  color: var(--dark, #000000);
+}
+:host([readonly]) .image-container {
+  max-width: var(--spacing-80, 5rem);
+  margin-right: var(--spacing-24, 1.5rem);
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+:host([readonly]) .image-container .content {
+  position: relative;
+  width: var(--spacing-80, 5rem);
+  height: var(--spacing-80, 5rem);
+  overflow: hidden;
+  border-radius: var(--border-radius-08, 0.5rem);
+}
+:host([readonly]) .image-container .content::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  opacity: 0.4;
+  content: "";
+}
+:host([readonly]) .image-container .content yoo-img {
+  height: 100%;
+  border-radius: var(--border-radius-08, 0.5rem);
+}
+:host([readonly]) .image-container .content.correct-answer {
+  border: var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d);
+}
+:host([readonly]) .image-container .content.correct-answer::before {
+  background-color: var(--success, #3aa76d);
+}
+:host([readonly]) .image-container .content.wrong-answer {
+  border: var(--border-width-01, 0.0625rem) solid var(--danger, #d44333);
+}
+:host([readonly]) .image-container .content.wrong-answer::before {
+  background-color: var(--danger, #d44333);
+}
+:host([readonly]) .image-container .text {
+  white-space: unset;
+  text-align: center;
+  -webkit-line-clamp: 2;
+}
+
+:host([is-pdf]) .image-container {
+  width: 100%;
+}
+:host([is-pdf]) .image-container .content {
+  max-width: 22.5rem;
+}
+:host([is-pdf]) .image-container .content yoo-img {
+  border: none;
+  border-radius: 0;
+}
+:host([is-pdf]) .image-container .text {
+  text-align: left;
+}
+:host([is-pdf]) .image-container:not(:last-child) {
+  margin-bottom: var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-16, 1rem);
+}
+
+.readonly-card {
+  width: 100%;
+}
+.readonly-card .invalid {
+  color: var(--danger, #d44333);
+}
+.readonly-card .valid {
+  color: var(--success, #3aa76d);
+}
+.readonly-card.chat {
+  display: flex;
+  flex-direction: column;
+  color: var(--dark, #000000);
+}
+.readonly-card.chat .text:not(:last-of-type) {
+  margin-bottom: var(--spacing-08, 0.5rem);
+}
+.readonly-card.chat .text {
+  width: fit-content;
+  height: fit-content;
+  padding: var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);
+  border-radius: var(--border-radius-16, 1rem);
+}
+.readonly-card.chat .text.valid {
+  color: var(--light, #ffffff);
+  background-color: var(--success, #3aa76d);
+}
+.readonly-card.chat .text.invalid {
+  color: var(--light, #ffffff);
+  background-color: var(--danger, #d44333);
+}
+
+:host(.history:not(.forcedhistory)) {
+  padding: 0;
+}
+:host(.history:not(.forcedhistory)) > .text,
+:host(.history:not(.forcedhistory)) .card .text,
+:host(.history:not(.forcedhistory)) .button .text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  margin-right: var(--spacing-16, 1rem);
+}
+
+:host {
+  --button-columns: 2;
+  --item-spacing: var(--spacing-16, 1rem);
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+:host yoo-banner {
+  height: 0;
+}
+:host #buttons {
+  display: grid;
+  grid-gap: var(--item-spacing);
+  grid-template-columns: repeat(var(--button-columns), minmax(0, 1fr));
+}
+:host yoo-button {
+  --side-padding: 0 var(--spacing-16, 1rem);
+}