Apply transforms.

Squidex · Aug 8, 2023 · d487196 · d487196
1 parent f25c5db
commit d487196
Show file tree

Hide file tree

Showing 128 changed files with 266 additions and 261 deletions.
diff --git a/...src/app/features/administration/pages/event-consumers/event-consumers-page.component.html b/...src/app/features/administration/pages/event-consumers/event-consumers-page.component.html
@@ -1,14 +1,14 @@
 <sqx-title message="i18n:eventConsumers.pageTitle"></sqx-title>
 
-<sqx-layout layout="main" titleText="i18n:common.consumers" titleIcon="time" [innerWidth]="50">
+<sqx-layout layout="main" titleText="i18n:common.consumers" titleIcon="time" innerWidth="50">
     <ng-container menu>
         <button type="button" class="btn btn-text-secondary" (click)="reload()" title="i18n:eventConsumers.refreshTooltip" shortcut="CTRL + B">
             <i class="icon-reset"></i> {{ 'common.refresh' | sqxTranslate }}
         </button>
     </ng-container>
 
     <ng-container>
-        <sqx-list-view innerWidth="50rem" [isLoading]="eventConsumersState.isLoading | async" [table]="true">
+        <sqx-list-view innerWidth="50rem" [isLoading]="eventConsumersState.isLoading | async" table="true">
             <ng-container header>
                 <table class="table table-items table-fixed" #header>
                     <thead>

diff --git a/frontend/src/app/features/administration/pages/restore/restore-page.component.html b/frontend/src/app/features/administration/pages/restore/restore-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:backups.restorePageTitle"></sqx-title>
 
-<sqx-layout layout="main" titleText="i18n:backups.restoreTitle" titleIcon="backup" [innerWidth]="70">
+<sqx-layout layout="main" titleText="i18n:backups.restoreTitle" titleIcon="backup" innerWidth="70">
     <ng-container>
         <sqx-list-view innerWidth="70rem">
             <div class="card section" *ngIf="restoreJob | async; let job">

diff --git a/frontend/src/app/features/administration/pages/users/user-page.component.html b/frontend/src/app/features/administration/pages/users/user-page.component.html
@@ -2,7 +2,7 @@
 <form [formGroup]="userForm.form" (ngSubmit)="save()">
     <input style="display: none;" type="password" name="foilautofill">
 
-    <sqx-layout layout="right" [width]="30" [white]="true" [padding]="true" [overflow]="true">
+    <sqx-layout layout="right" width="30" white="true" padding="true" overflow="true">
         <ng-container title>
             <ng-container *ngIf="usersState.selectedUser | async; else noUserTitle">
                 <sqx-title message="i18n:users.editPageTitle"></sqx-title>

diff --git a/frontend/src/app/features/administration/pages/users/users-page.component.html b/frontend/src/app/features/administration/pages/users/users-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:users.listPageTitle"></sqx-title>
 
-<sqx-layout layout="main" titleText="i18n:users.listTitle" titleIcon="user-o" [innerWidth]="50">
+<sqx-layout layout="main" titleText="i18n:users.listTitle" titleIcon="user-o" innerWidth="50">
     <ng-container menu>
         <div class="d-flex justify-content-end">
             <button type="button" class="btn btn-text-secondary" (click)="reload()" title="i18n:users.refreshTooltip" shortcut="CTRL + B">
@@ -22,7 +22,7 @@
     </ng-container>
 
     <ng-container>
-        <sqx-list-view innerWidth="50rem" [isLoading]="usersState.isLoading | async" [table]="true">
+        <sqx-list-view innerWidth="50rem" [isLoading]="usersState.isLoading | async" table="true">
             <ng-container header>
                 <table class="table table-items table-fixed" #header>
                     <thead>

diff --git a/frontend/src/app/features/api/api-area.component.html b/frontend/src/app/features/api/api-area.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:api.pageTitle"></sqx-title>
 
-<sqx-layout layout="left" titleText="i18n:api.title" titleIcon="api" [width]="16" [white]="true" [overflow]="true" [padding]="true">
+<sqx-layout layout="left" titleText="i18n:api.title" titleIcon="api" width="16" white="true" overflow="true" padding="true">
     <ng-container>
         <ul class="nav nav-light flex-column">
             <li class="nav-item" sqxTourStep="graphql">

diff --git a/frontend/src/app/features/api/pages/graphql/graphql-page.component.html b/frontend/src/app/features/api/pages/graphql/graphql-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:api.graphqlPageTitle"></sqx-title>
 
-<sqx-layout layout="main" [hideHeader]="true" [hideSidebar]="true">
+<sqx-layout layout="main" hideHeader="true" hideSidebar="true">
     <div inner #graphiQLContainer sqxTourStep="graphQLExplorer"></div>
 
     <button class="btn btn-simple btn-options" *ngIf="clientsReadable" (click)="clientsDialog.show()">

diff --git a/frontend/src/app/features/apps/pages/app.component.html b/frontend/src/app/features/apps/pages/app.component.html
@@ -29,7 +29,7 @@ <h3 class="card-title">{{app.displayName}}</h3>
                 <i class="icon-dots"></i>
             </button>
 
-            <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" [scrollY]="true">
+            <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" scrollY="true">
                 <a class="dropdown-item dropdown-item-delete"
                     (sqxConfirmClick)="leave.emit(app)"
                     confirmTitle="i18n:apps.leaveConfirmTitle"

diff --git a/frontend/src/app/features/apps/pages/onboarding-dialog.component.html b/frontend/src/app/features/apps/pages/onboarding-dialog.component.html
@@ -1,4 +1,4 @@
-<sqx-modal-dialog [showHeader]="false">
+<sqx-modal-dialog showHeader="false">
     <ng-container tabs>
         <div class="squid d-flex align-items-center justify-content-center">
             <img src="./images/squid.svg">

diff --git a/frontend/src/app/features/apps/pages/team.component.html b/frontend/src/app/features/apps/pages/team.component.html
@@ -11,7 +11,7 @@ <h3>{{team.name}}</h3>
                 <i class="icon-dots"></i>
             </button>
 
-            <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" [scrollY]="true">
+            <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" scrollY="true">
                 <a class="dropdown-item dropdown-item-delete"
                     (sqxConfirmClick)="leave.emit(team)"
                     confirmTitle="i18n:teams.leaveConfirmTitle"

diff --git a/frontend/src/app/features/assets/pages/assets-filters-page.component.html b/frontend/src/app/features/assets/pages/assets-filters-page.component.html
@@ -1,4 +1,4 @@
-<sqx-layout titleText="i18n:common.filters" [width]="20" [white]="true" [padding]="true" [overflow]="true">
+<sqx-layout titleText="i18n:common.filters" width="20" white="true" padding="true" overflow="true">
     <h3>{{ 'common.tags' | sqxTranslate }}</h3>
 
     <sqx-asset-tags (reset)="resetTags()"

diff --git a/frontend/src/app/features/assets/pages/assets-page.component.html b/frontend/src/app/features/assets/pages/assets-page.component.html
@@ -15,13 +15,13 @@
                             [itemsSource]="assetsState.tagsNames | async"
                             [ngModel]="assetsState.selectedTagNames | async"
                             (ngModelChange)="selectTags($event)"
-                            [styleScrollable]="true"
-                            [undefinedWhenEmpty]="false">
+                            styleScrollable="true"
+                            undefinedWhenEmpty="false">
                         </sqx-tag-editor>
                     </div>
                     <div class="col-6">
                         <sqx-search-form formClass="form" placeholder="{{ 'assets.searchByName' | sqxTranslate }}" fieldExample="fileSize"
-                            [enableShortcut]="true"
+                            enableShortcut="true"
                             [queries]="listQueries"
                             [queriesTypes]="'common.assets' | sqxTranslate"
                             [query]="assetsState.query | async"

diff --git a/frontend/src/app/features/content/pages/calendar/calendar-page.component.html b/frontend/src/app/features/content/pages/calendar/calendar-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:contents.calendar"></sqx-title>
 
-<sqx-layout layout="main" titleText="i18n:contents.calendar" [hideSidebar]="true">
+<sqx-layout layout="main" titleText="i18n:contents.calendar" hideSidebar="true">
     <ng-container menu>
         {{title}}
 
@@ -72,7 +72,7 @@
                         layout="text"
                         [status]="content.status"
                         [statusColor]="content.statusColor"
-                        [small]="true">
+                        small="true">
                     </sqx-content-status>
                 </div>
             </div>
@@ -87,7 +87,7 @@
                         layout="text"
                         [status]="content.scheduleJob.status"
                         [statusColor]="content.scheduleJob.color"
-                        [small]="true">
+                        small="true">
                     </sqx-content-status>
                 </div>
             </div>

diff --git a/frontend/src/app/features/content/pages/comments/comments-page.component.html b/frontend/src/app/features/content/pages/comments/comments-page.component.html
@@ -1,3 +1,3 @@
-<sqx-layout layout="right" titleText="i18n:comments.title" [width]="20" [white]="true">
+<sqx-layout layout="right" titleText="i18n:comments.title" width="20" white="true">
     <sqx-comments [commentsId]="commentsId | async"></sqx-comments>
 </sqx-layout>
diff --git a/frontend/src/app/features/content/pages/content/content-history-page.component.html b/frontend/src/app/features/content/pages/content/content-history-page.component.html
@@ -1,4 +1,4 @@
-<sqx-layout layout="right" titleText="i18n:common.workflow" [width]="20" [white]="true" [overflow]="true" [padding]="true">
+<sqx-layout layout="right" titleText="i18n:common.workflow" width="20" white="true" overflow="true" padding="true">
     <ng-container>
         <div class="section mb-4">
             <label for="id">{{ 'common.id' | sqxTranslate }}</label>
@@ -31,7 +31,7 @@
                     </sqx-content-status>
                 </button>
 
-                <sqx-dropdown-menu *sqxModal="dropdownNew;closeAlways:true" [sqxAnchoredTo]="buttonOptions" [scrollY]="true">
+                <sqx-dropdown-menu *sqxModal="dropdownNew;closeAlways:true" [sqxAnchoredTo]="buttonOptions" scrollY="true">
                     <ng-container *ngIf="content.statusUpdates.length > 0">
                         <a class="dropdown-item" *ngFor="let info of content.statusUpdates" (click)="changeStatus(info.status)">
                             {{ 'common.statusChangeTo' | sqxTranslate }} <i class="icon-circle icon-sm" [style.color]="info.color"></i> {{info.status}}
@@ -66,23 +66,25 @@
 
             <div *ngIf="!content.newStatus; else newStatusOld">
                 <button type="button" class="btn btn-outline-secondary btn-block btn-status" (click)="dropdown.toggle()" #buttonOptions sqxTourStep="status">
-                    <sqx-content-status [small]="true"
+                    <sqx-content-status
                         layout="multiline"
                         [status]="content.status"
                         [statusColor]="content.statusColor"
-                        [scheduled]="content.scheduleJob">
+                        [scheduled]="content.scheduleJob"
+                        small="true">
                     </sqx-content-status>
                 </button>
 
-                <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" [scrollY]="true">
+                <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" scrollY="true">
                     <ng-container *ngIf="content.statusUpdates.length > 0">
                         <a class="dropdown-item" *ngFor="let info of content.statusUpdates" (click)="changeStatus(info.status)">
                             {{ 'common.statusChangeTo' | sqxTranslate }} 
 
-                            <sqx-content-status [small]="true"
+                            <sqx-content-status
                                 layout="text"
                                 [status]="info.status"
-                                [statusColor]="info.color">
+                                [statusColor]="info.color"
+                                small="true">
                             </sqx-content-status>
                         </a>
 

diff --git a/frontend/src/app/features/content/pages/content/content-page.component.html b/frontend/src/app/features/content/pages/content/content-page.component.html
@@ -67,7 +67,7 @@ <h3>{{ 'contents.createTitle' | sqxTranslate }}</h3>
                             <i class="icon-dots"></i>
                         </button>
 
-                        <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" [scrollY]="true">
+                        <sqx-dropdown-menu *sqxModal="dropdown;closeAlways:true" [sqxAnchoredTo]="buttonOptions" scrollY="true">
                             <a class="dropdown-item dropdown-item-delete"
                                 (sqxConfirmClick)="delete()"
                                 confirmTitle="i18n:contents.deleteConfirmTitle"

diff --git a/frontend/src/app/features/content/pages/content/editor/content-editor.component.html b/frontend/src/app/features/content/pages/content/editor/content-editor.component.html
@@ -1,4 +1,4 @@
-<sqx-form-error [bubble]="true" [closeable]="true" [error]="(contentForm.error | async)"></sqx-form-error>
+<sqx-form-error bubble="true" closeable="true" [error]="(contentForm.error | async)"></sqx-form-error>
 
 <sqx-list-view>
     <ng-container topHeader>        

diff --git a/frontend/src/app/features/content/pages/content/editor/content-section.component.html b/frontend/src/app/features/content/pages/content/editor/content-section.component.html
@@ -10,7 +10,7 @@
                 <h3>{{separator.displayName}}</h3>
 
                 <sqx-form-hint *ngIf="separator.properties.hints && separator.properties.hints.length > 0">
-                    <span [sqxMarkdown]="separator.properties.hints" [optional]="true" [inline]="true"></span>
+                    <span [sqxMarkdown]="separator.properties.hints" optional="true" inline="true"></span>
                 </sqx-form-hint>
             </div>
         </div>

diff --git a/frontend/src/app/features/content/pages/content/editor/field-copy-button.component.html b/frontend/src/app/features/content/pages/content/editor/field-copy-button.component.html
@@ -3,7 +3,7 @@
         <i class="icon-copy"></i>
     </button>
 
-    <sqx-dropdown-menu *sqxModal="dropdown" [sqxAnchoredTo]="button" [scrollY]="true">
+    <sqx-dropdown-menu *sqxModal="dropdown" [sqxAnchoredTo]="button" scrollY="true">
         <div class="section d-flex justify-content-end">
             <button type="button" class="btn btn-primary" (click)="copy()" tabindex="-1">
                 {{ 'common.copy' | sqxTranslate }}

diff --git a/frontend/src/app/features/content/pages/content/inspecting/content-inspection.component.html b/frontend/src/app/features/content/pages/content/inspecting/content-inspection.component.html
@@ -1,4 +1,4 @@
-<sqx-form-error [bubble]="true" [closeable]="true" [error]="contentError"></sqx-form-error>
+<sqx-form-error bubble="true" closeable="true" [error]="contentError"></sqx-form-error>
 
 <div class="inner-menu">
     <ul class="nav nav-tabs2" *ngIf="mode | async; let currentMode">
@@ -22,7 +22,7 @@
 
 <div class="inner-main">
     <sqx-code-editor
-        [borderless]="true" 
+        borderless="true" 
         [ngModel]="actualData | async"
         (ngModelChange)="setData($event)"
         valueMode="Json">

diff --git a/frontend/src/app/features/content/pages/content/references/content-references.component.html b/frontend/src/app/features/content/pages/content/references/content-references.component.html
@@ -1,4 +1,4 @@
-<sqx-list-view [isLoading]="contentsState.isLoading | async" [table]="true">
+<sqx-list-view [isLoading]="contentsState.isLoading | async" table="true">
     <ng-container>
         <table class="table table-items table-fixed" *ngIf="contentsState.contents | async; let contents">
             <tbody *ngFor="let content of contents; trackBy: trackByContent"

diff --git a/frontend/src/app/features/content/pages/contents/contents-filters-page.component.html b/frontend/src/app/features/content/pages/contents/contents-filters-page.component.html
@@ -1,4 +1,4 @@
-<sqx-layout titleText="i18n:common.filters" [width]="20" [white]="true" [padding]="true" [overflow]="true">
+<sqx-layout titleText="i18n:common.filters" width="20" white="true" padding="true" overflow="true">
     <ng-container *ngIf="schemaQueries | async; let queries">
         <sqx-query-list
             [types]="'common.contents' | sqxTranslate"

diff --git a/frontend/src/app/features/content/pages/contents/contents-page.component.html b/frontend/src/app/features/content/pages/contents/contents-page.component.html
@@ -12,7 +12,7 @@
             </div>
             <div class="col">
                 <sqx-search-form formClass="form" placeholder="{{ 'contents.searchPlaceholder' | sqxTranslate }}"
-                    [enableShortcut]="true"
+                    enableShortcut="true"
                     [language]="(languagesState.isoMasterLanguage | async)!"
                     [languages]="languages"
                     [queries]="queries | async"
@@ -42,7 +42,7 @@
     <ng-container>
         <ng-container *ngIf="tableSettings | async; let tableSettings">
             <ng-container *ngIf="tableSettings.listFields | async; let tableFields">
-                <sqx-list-view [isLoading]="contentsState.isLoading | async" [syncedHeader]="true" [tableNoPadding]="true">
+                <sqx-list-view [isLoading]="contentsState.isLoading | async" syncedHeader="true" tableNoPadding="true">
                     <ng-container topHeader>
                         <div class="selection" *ngIf="selectionCount > 0">
                             {{ 'contents.selectionCount' | sqxTranslate: { count: selectionCount } }}&nbsp;&nbsp;
@@ -68,7 +68,7 @@
                                 <i class="icon-settings"></i>
                             </button>
 
-                            <sqx-dropdown-menu *sqxModal="tableViewModal" [sqxAnchoredTo]="buttonSettings" [scrollY]="true" position="bottom-end">
+                            <sqx-dropdown-menu *sqxModal="tableViewModal" [sqxAnchoredTo]="buttonSettings" scrollY="true" position="bottom-end">
                                 <sqx-custom-view-editor
                                     [allFields]="tableSettings.schemaFields" 
                                     (listFieldsChange)="tableSettings.updateFields($event)"

diff --git a/frontend/src/app/features/content/pages/references/references-page.component.html b/frontend/src/app/features/content/pages/references/references-page.component.html
@@ -19,7 +19,7 @@
     </ng-container>
 
     <ng-container>
-        <sqx-list-view [isLoading]="contentsState.isLoading | async" [table]="true">
+        <sqx-list-view [isLoading]="contentsState.isLoading | async" table="true">
             <ng-container>
                 <table class="table table-items table-fixed" *ngIf="contentsState.contents | async; let contents">
                     <tbody *ngFor="let content of contents; trackBy: trackByContent"

diff --git a/frontend/src/app/features/content/pages/schemas/schemas-page.component.html b/frontend/src/app/features/content/pages/schemas/schemas-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:contents.schemasPageTitle"></sqx-title>
 
-<sqx-layout layout="left" titleCollapsed="i18n:common.schemas" [width]="18" [white]="true" [padding]="true" [overflow]="true" *ngIf="!isEmbedded">
+<sqx-layout layout="left" titleCollapsed="i18n:common.schemas" width="18" white="true" padding="true" overflow="true" *ngIf="!isEmbedded">
     <ng-container menu>
         <div class="search-form">
             <input class="form-control" [formControl]="schemasFilter" placeholder="{{ 'contents.searchSchemasPlaceholder' | sqxTranslate }}">

diff --git a/frontend/src/app/features/content/pages/sidebar/sidebar-page.component.html b/frontend/src/app/features/content/pages/sidebar/sidebar-page.component.html
@@ -1,4 +1,4 @@
-<sqx-layout titleText="i18n:common.sidebar" [width]="20" [white]="true" [padding]="true" [overflow]="true">
+<sqx-layout titleText="i18n:common.sidebar" width="20" white="true" padding="true" overflow="true">
     <sqx-content-extension
         [url]="url | async"
         [content]="contentsState.selectedContent | async"

diff --git a/frontend/src/app/features/content/shared/due-time-selector.component.html b/frontend/src/app/features/content/shared/due-time-selector.component.html
@@ -18,7 +18,7 @@
             </label>
         </div>
 
-        <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" [enforceTime]="true" mode="DateTime" [hideClear]="true" [(ngModel)]="dueTime"></sqx-date-time-editor>
+        <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" enforceTime="true" mode="DateTime" hideClear="true" [(ngModel)]="dueTime"></sqx-date-time-editor>
     </ng-container>
 
     <ng-container footer>

diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.html b/frontend/src/app/features/content/shared/forms/array-editor.component.html
@@ -81,7 +81,7 @@
                         {{ 'contents.addComponent' | sqxTranslate}}
                     </button>
 
-                    <sqx-dropdown-menu *sqxModal="schemasDropdown;closeAlways:true" [sqxAnchoredTo]="buttonSelect" [scrollY]="true">
+                    <sqx-dropdown-menu *sqxModal="schemasDropdown;closeAlways:true" [sqxAnchoredTo]="buttonSelect" scrollY="true">
                         <a class="dropdown-item" *ngFor="let schema of schemasList" (click)="addComponent(schema)">
                             {{schema.displayName}}
                         </a>

diff --git a/frontend/src/app/features/content/shared/forms/assets-editor.component.html b/frontend/src/app/features/content/shared/forms/assets-editor.component.html
@@ -23,7 +23,7 @@
         </div>
     </div>
 
-    <div class="body" (sqxResizeCondition)="setCompact($event)" [sqxResizeMinWidth]="600" [sqxResizeMaxWidth]="0">
+    <div class="body" (sqxResizeCondition)="setCompact($event)" sqxResizeMinWidth="600" sqxResizeMaxWidth="0">
         <ng-container *ngIf="!snapshot.isListView; else listTemplate">
             <div class="row g-0">
                 <sqx-asset *ngFor="let file of snapshot.assetFiles"
@@ -40,7 +40,7 @@
                     (edit)="editStart($event)"
                     [isDisabled]="snapshot.isDisabled"
                     [isCompact]="snapshot.isCompact"
-                    [removeMode]="true"
+                    removeMode="true"
                     (remove)="removeLoadedAsset(asset)"
                     (update)="notifyOthers(asset)">
                 </sqx-asset>
@@ -54,7 +54,7 @@
                     [folderId]="folderId"
                     [isCompact]="snapshot.isCompact"
                     [isDisabled]="snapshot.isDisabled"
-                    [isListView]="true"
+                    isListView="true"
                     (loadDone)="addAsset(file, $event)"
                     (loadError)="removeLoadingAsset(file)">
                 </sqx-asset>
@@ -67,11 +67,11 @@
                         <sqx-asset
                             [asset]="asset"
                             (edit)="editStart($event)"
-                            [isListView]="true"
+                            isListView="true"
                             [isDisabled]="snapshot.isDisabled"
                             [isCompact]="snapshot.isCompact"
                             (update)="notifyOthers(asset)"
-                            [removeMode]="true"
+                            removeMode="true"
                             (remove)="removeLoadedAsset(asset)">
                         </sqx-asset>
                     </div>

diff --git a/frontend/src/app/features/content/shared/forms/chat-dialog.component.html b/frontend/src/app/features/content/shared/forms/chat-dialog.component.html
@@ -4,8 +4,8 @@
     </ng-container>
 
     <ng-container content>
-        <sqx-form-alert [marginBottom]="4">
-            <span [sqxMarkdown]="'chat.description' | sqxTranslate" [inline]="true"></span>
+        <sqx-form-alert marginBottom="4">
+            <span [sqxMarkdown]="'chat.description' | sqxTranslate" inline="true"></span>
         </sqx-form-alert>
 
         <form (ngSubmit)="ask()">

diff --git a/frontend/src/app/features/content/shared/forms/component-section.component.html b/frontend/src/app/features/content/shared/forms/component-section.component.html
@@ -3,7 +3,7 @@
         <h3>{{separator!.displayName}}</h3>
 
         <sqx-form-hint *ngIf="separator.properties.hints && separator.properties.hints.length > 0">
-            <span [sqxMarkdown]="separator.properties.hints" [optional]="true" [inline]="true"></span>
+            <span [sqxMarkdown]="separator.properties.hints" optional="true" inline="true"></span>
         </sqx-form-hint>
     </div>