@aquera/nile-elements 0.1.63-beta-1.2 → 0.1.64-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.63-beta-1.2",
+  "version": "0.1.64-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -108,6 +108,10 @@ export const styles = css`
   }
 
   /* Uploading State */
+  nile-loader {
+    line-height: 0;
+  }
+
   .uploading {
     height: 62px;
     width: 648px;
@@ -189,6 +193,7 @@ export const styles = css`
 
   .preview-inner {
     display: flex;
+    align-items: center;
     gap: 18px;
   }
 
@@ -255,6 +260,7 @@ export const styles = css`
 
   .no-preview-container {
     display: flex;
+    align-items: center;
     gap: 18px;
   }
 
@@ -288,12 +294,22 @@ export const styles = css`
     margin: 0px;
     font-size: var(--nile-type-scale-3);
     font-weight: var(--nile-font-weight-regular);
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 500px;
   }
 
   .preview-file-info p:last-of-type{
     color: var(--nile-colors-neutral-700);
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 500px;
   }
 
   .no-preview > nile-icon:hover {
@@ -312,6 +328,7 @@ export const styles = css`
   .error-container {
     width: 95%;
     display: flex;
+    align-items: center;
     gap: 18px;
   }
 
@@ -352,7 +369,7 @@ export const styles = css`
     width: 538px;
   }
   
-  .file-info > nile-tooltip > span {
+  .file-info nile-tooltip span, .file-info span {
     color: var(--nile-colors-red-700);
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
@@ -541,7 +558,7 @@ export const styles = css`
     max-width: 222px;
   }
   
-  .file-info-vertical-state > nile-tooltip > span {
+  .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
     color: var(--nile-colors-red-700);
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -7,6 +7,7 @@ import { html, TemplateResult } from 'lit';
 import { FilePreviewErrorMessages, RemoveFileDetail } from './types';
 import { removeFile, cancelFileUpload } from './utils';
 import { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';
+import { NileFilePreview } from './nile-file-preview';
 
  export function getHorizontalUploadingState(
   file: File,
@@ -81,7 +82,7 @@ export function getHorizontalNoPreviewState(
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
         <div class="preview-file-info">
-          <p>${truncateString(file.name, file?.type)}</p>
+          <p>${file.name}</p>
           <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
@@ -101,8 +102,10 @@ export function getHorizontalNoPreviewState(
 export function getHorizontalErrorState(
   file: File,
   errorMessage: string,
-  originalUrl: string
+  originalUrl: string,
+  nileFilePreview: NileFilePreview
 ): TemplateResult {
+  truncateString(nileFilePreview);
   return html`
     <div class="error horizontal-div" part="horizontal-error-state">
       <div class="error-container">
@@ -111,9 +114,13 @@ export function getHorizontalErrorState(
         </div>
         <div class="file-info">
           <p class="horizontal-file-name">${file.name}</p>
-          <nile-tooltip content=${errorMessage}>
-            <span>${errorMessage}</span>
-          </nile-tooltip>
+          ${
+            nileFilePreview.isStringTruncated
+              ? html`<nile-tooltip content=${errorMessage}>
+                  <span>${errorMessage}</span>
+                </nile-tooltip>`
+              : html`<span>${errorMessage}</span>`
+          }
         </div>
       </div>
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -201,7 +208,7 @@ export function getVerticalNoPreviewState(
       </div>
 
       <div class="content-container">
-        <p>${truncateString(file.name, file?.type)}</p>
+        <p>${file.name}</p>
         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
@@ -219,8 +226,10 @@ export function getVerticalNoPreviewState(
 export function getVerticalErrorState(
   file: File,
   errorMessage: string,
-  originalUrl: string
+  originalUrl: string,
+  nileFilePreview: NileFilePreview
 ): TemplateResult {
+  truncateString(nileFilePreview);
   return html`
     <div class="vertical-div vertical-error" part="vertical-error-state">
       <div class="vertical-document-icon error-bg">
@@ -229,9 +238,13 @@ export function getVerticalErrorState(
 
       <div class="file-info-vertical-state">
         <p class="vertical-file-name">${file.name}</p>
-        <nile-tooltip content=${errorMessage}>
-          <span>${errorMessage}</span>
-        </nile-tooltip>
+        ${
+          nileFilePreview.isStringTruncated
+            ? html`<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+            : html`<span>${errorMessage}</span>`
+        }
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">

package/src/nile-file-preview/nile-file-preview.ts

@@ -8,7 +8,7 @@
 import {styles} from './nile-file-preview.css';
 import NileElement from '../internal/nile-element';
 import { customElement, property } from 'lit/decorators.js';
-import { fileUploadServerError, generatePreviewUrl } from './utils';
+import { generatePreviewUrl, truncateString } from './utils';
 import { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';
 import { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import {
@@ -48,6 +48,7 @@ export class NileFilePreview extends NileElement {
   @property({ type: String }) inputFileName: string = "";
 	private inputFileHtml: TemplateResult | null = null;
   private originalUrl: string = "";
+  public isStringTruncated: boolean = false;
 
   /**
    * Render method
@@ -61,7 +62,7 @@ export class NileFilePreview extends NileElement {
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
-    fileUploadServerError(this);
+    // fileUploadServerError(this);
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -109,8 +110,8 @@ export class NileFilePreview extends NileElement {
       console.error(this.errorMessage);
 
       this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL
-        ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl)
-        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl);
+        ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)
+        : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);
       this.requestUpdate();
     }
   }
@@ -141,8 +142,8 @@ export class NileFilePreview extends NileElement {
       //   : FilePreviewErrorMessages.UPLOAD_CANCEL;
 
       this.inputFileHtml = isHorizontal
-        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl)
-        : getVerticalErrorState(file, this.errorMessage, this.originalUrl);
+        ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)
+        : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);
     }
     this.requestUpdate();
   }

package/src/nile-file-preview/utils/nile-file-preview.util.ts

@@ -61,15 +61,12 @@ export const getFileType = (type: string): string => {
   return type.split('/')[1].toUpperCase();
 }
 
-export const truncateString = (str: string, type: string): string => {
-  return str.length > 20 ? (str.slice(0, 10) + '...' +  str.slice(str.length - 5, str.length - 1) + '.' + type.split('/')[1]) : str;
-}
-
-export const fileUploadServerError = (nileFilePreview: NileFilePreview) => {
-  document.addEventListener('nile-network-error', (e: any) => {
-    console.log('working file preview');
-    
-    nileFilePreview.errorMessage = FilePreviewErrorMessages.NETWORK_ERROR;
+export const truncateString = (nileFilePreview: NileFilePreview): void => {
+  if(nileFilePreview.variant === 'vertical' && nileFilePreview.errorMessage.length > 34) {
+    nileFilePreview.isStringTruncated = true;
     nileFilePreview.requestUpdate();
-  });
+  } else if(nileFilePreview.variant === 'horizontal' && nileFilePreview.errorMessage.length > 96) {
+    nileFilePreview.isStringTruncated = true;
+    nileFilePreview.requestUpdate();
+  }
 }

package/src/nile-file-upload/nile-file-upload.css.ts

@@ -599,7 +599,7 @@ export const styles = css`
     color: var(--nile-colors-red-700);
     white-space: nowrap;
     text-align: left;
-    max-width: 538px;
+    max-width: 560px;
     overflow: hidden;
     text-overflow: ellipsis;
   }

package/src/nile-file-upload/nile-file-upload.template.ts

@@ -3,6 +3,8 @@ import './nile-file-upload.css';
 import { DragHandler } from './utils/drag-drop.util';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { FileUploadDefaults, FileUploadState } from './types/file-upload.enums';
+import { truncateString } from './utils/file-validation.util';
+import { NileFileUpload } from './nile-file-upload';
 
 const baseHorizontalState = (
   browseFiles: Function,
@@ -12,8 +14,11 @@ const baseHorizontalState = (
   dragHandler: DragHandler,
   state: FileUploadState,
   errorMessage: string,
-  allowedTypes: string[]
-): TemplateResult => html`
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => {
+  truncateString(nileFileUpload);
+  return html`
   <div class="wrapper" part="horizontal-wrapper">
     <div part="horizontal-div" class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
       <div part="inner-div" class="inner-div">
@@ -41,14 +46,19 @@ const baseHorizontalState = (
     ${errorMessage ?
       html`<div class="upload-error">
         <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
-        <nile-tooltip content=${errorMessage}>
-          <span>${errorMessage}</span>
-        </nile-tooltip>
+        ${
+          nileFileUpload.isStringTruncated
+            ? html`<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+            : html`<span>${errorMessage}</span>`
+        }
       </div>` :
       html``
     }
   </div>
-`;
+  `;
+}
 
 export const getHorizontalDefaultState = (
   browseFiles: Function,
@@ -57,8 +67,9 @@ export const getHorizontalDefaultState = (
   dragHandler: DragHandler,
   state: FileUploadState,
   errorMessage: string,
-  allowedTypes: string[]
-): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes);
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
 
 export const getHorizontalDisabledState = (
   browseFiles: Function,
@@ -67,8 +78,9 @@ export const getHorizontalDisabledState = (
   dragHandler: DragHandler,
   state: FileUploadState,
   errorMessage: string,
-  allowedTypes: string[]
-): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes);
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage, allowedTypes, nileFileUpload);
 
 export const getHorizontalDragState = (): TemplateResult => html`
   <div part="horizontal-drag-state" class="horizontal-div dragging">
@@ -98,8 +110,11 @@ const baseVerticalState = (
   disabled: boolean,
   dragHandler: DragHandler,
   errorMessage: string,
-  allowedTypes: string[]
-): TemplateResult => html`
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => {
+  truncateString(nileFileUpload);
+  return html`
   <div part="vertical-wrapper" class="wrapper">
     <div part="vertical-default" class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
       <slot name="upload-icon">
@@ -132,7 +147,8 @@ const baseVerticalState = (
       html``
     }
   </div>
-`;
+  `;
+}
 
 export const getVerticalDefaultState = (
   browseFiles: Function,
@@ -140,8 +156,9 @@ export const getVerticalDefaultState = (
   subtitle: string,
   dragHandler: DragHandler,
   errorMessage: string,
-  allowedTypes: string[]
-): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes);
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage, allowedTypes, nileFileUpload);
 
 export const getVerticalDisabledState = (
   browseFiles: Function,
@@ -149,8 +166,9 @@ export const getVerticalDisabledState = (
   subtitle: string,
   dragHandler: DragHandler,
   errorMessage: string,
-  allowedTypes: string[]
-): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes);
+  allowedTypes: string[],
+  nileFileUpload: NileFileUpload
+): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage, allowedTypes, nileFileUpload);
 
 
 export const getVerticalDragState = (): TemplateResult => html`

package/src/nile-file-upload/nile-file-upload.ts

@@ -55,6 +55,7 @@ export class NileFileUpload extends NileElement {
   @query('input') input!: HTMLInputElement;
   public uploadRequests = new Map<File, XMLHttpRequest>();
   public fileSizeExceededFilesNumber: number = 0;
+  public isStringTruncated: boolean = false;
   
   private dragHandler!: DragHandler;
 
@@ -121,32 +122,32 @@ export class NileFileUpload extends NileElement {
   private getHorizontalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DISABLED:
-        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
+        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DRAG:
         return getHorizontalDragState();
 
       default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);
     }
   }
 
   private getVerticalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
 
       case FileUploadState.DRAG:
         return getVerticalDragState();
 
       default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);
     }
   }
 

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -203,4 +203,16 @@ export const removeFile = (uploadedFiles: File[], nileFileUpload: NileFileUpload
     nileFileUpload.uploadedFiles = uploadedFiles;
     nileFileUpload.requestUpdate();
   });
+}
+
+export const truncateString = (nileFileUpload: NileFileUpload): void => {
+  if(nileFileUpload.variant === 'vertical' && nileFileUpload.errorMessage.length > 34) {
+    nileFileUpload.isStringTruncated = true;
+    nileFileUpload.requestUpdate();
+  } else if(nileFileUpload.variant === 'horizontal' && nileFileUpload.errorMessage.length > 96) {
+    console.log('working');
+    
+    nileFileUpload.isStringTruncated = true;
+    nileFileUpload.requestUpdate();
+  }
 }

package/vscode-html-custom-data.json

@@ -1395,7 +1395,7 @@
     },
     {
       "name": "nile-file-preview",
-      "description": "Nile preview component.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\n  * `inputFile` {`File`} - \n\n  * `fileUrl` {`string`} - \n\n  * `uploadStatus` {`number`} - \n\n  * `state` {`FilePreviewState`} - \n\n  * `variant` {`FilePreviewVariant`} - \n\n  * `inputFileName` {`string`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - \n\n  * `inputFile` {`File`} - \n\n  * `fileUrl` {`string`} - \n\n  * `uploadStatus` {`number`} - \n\n  * `state` {`FilePreviewState`} - \n\n  * `variant` {`FilePreviewVariant`} - \n\n  * `inputFileName` {`string`} - \n\n  * `inputFileHtml` {`UncompiledTemplateResult<ResultType> | null`} - \n\n  * `originalUrl` {`string`} - \n\n  * `dummyFile` {`File`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile preview component.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\n  * `inputFile` {`File`} - \n\n  * `fileUrl` {`string`} - \n\n  * `uploadStatus` {`number`} - \n\n  * `state` {`FilePreviewState`} - \n\n  * `variant` {`FilePreviewVariant`} - \n\n  * `inputFileName` {`string`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - \n\n  * `inputFile` {`File`} - \n\n  * `fileUrl` {`string`} - \n\n  * `uploadStatus` {`number`} - \n\n  * `state` {`FilePreviewState`} - \n\n  * `variant` {`FilePreviewVariant`} - \n\n  * `inputFileName` {`string`} - \n\n  * `inputFileHtml` {`UncompiledTemplateResult<ResultType> | null`} - \n\n  * `originalUrl` {`string`} - \n\n  * `isStringTruncated` {`boolean`} - \n\n  * `dummyFile` {`File`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "errorMessage",
@@ -1454,7 +1454,7 @@
     },
     {
       "name": "nile-file-upload",
-      "description": "Nile file-upload component.\n\nAttributes:\n\n  * `size` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `allowMultiple` {`boolean`} - \n\n  * `allowDuplicates` {`boolean`} - \n\n  * `allowedTypes` {`string[]`} - \n\n  * `uploadedFiles` {`File[]`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `state` {`FileUploadState`} - \n\n  * `variant` {`FileUploadVariant`} - \n\n  * `fileUploadUrl` {`string`} - \n\n  * `autoUpload` {`boolean`} - \n\nProperties:\n\n  * `size` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `allowMultiple` {`boolean`} - \n\n  * `allowDuplicates` {`boolean`} - \n\n  * `allowedTypes` {`string[]`} - \n\n  * `uploadedFiles` {`File[]`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `state` {`FileUploadState`} - \n\n  * `variant` {`FileUploadVariant`} - \n\n  * `fileUploadUrl` {`string`} - \n\n  * `autoUpload` {`boolean`} - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `uploadRequests` {`Map<File, XMLHttpRequest>`} - \n\n  * `fileSizeExceededFilesNumber` {`number`} - \n\n  * `dragHandler` - \n\n  * `setState` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile file-upload component.\n\nAttributes:\n\n  * `size` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `allowMultiple` {`boolean`} - \n\n  * `allowDuplicates` {`boolean`} - \n\n  * `allowedTypes` {`string[]`} - \n\n  * `uploadedFiles` {`File[]`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `state` {`FileUploadState`} - \n\n  * `variant` {`FileUploadVariant`} - \n\n  * `fileUploadUrl` {`string`} - \n\n  * `autoUpload` {`boolean`} - \n\nProperties:\n\n  * `size` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `allowMultiple` {`boolean`} - \n\n  * `allowDuplicates` {`boolean`} - \n\n  * `allowedTypes` {`string[]`} - \n\n  * `uploadedFiles` {`File[]`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `state` {`FileUploadState`} - \n\n  * `variant` {`FileUploadVariant`} - \n\n  * `fileUploadUrl` {`string`} - \n\n  * `autoUpload` {`boolean`} - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `uploadRequests` {`Map<File, XMLHttpRequest>`} - \n\n  * `fileSizeExceededFilesNumber` {`number`} - \n\n  * `isStringTruncated` {`boolean`} - \n\n  * `dragHandler` - \n\n  * `setState` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",