@yoobic/yobi 8.3.0-18 → 8.3.0-20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/yoo-collapsible.cjs.entry.js +1 -1
- package/dist/cjs/yoo-tabs.cjs.entry.js +3 -4
- package/dist/collection/components/1.atoms/collapsible/collapsible.css +0 -1
- package/dist/collection/components/1.atoms/tabs/tabs.css +82 -77
- package/dist/collection/components/1.atoms/tabs/tabs.js +3 -3
- package/dist/design-system/yoo-collapsible.entry.js +1 -1
- package/dist/design-system/yoo-tabs.entry.js +3 -4
- package/dist/esm/yoo-collapsible.entry.js +1 -1
- package/dist/esm/yoo-tabs.entry.js +3 -4
- package/dist/types/home/runner/work/yoobic-ng-6/yoobic-ng-6/design-system/stencil/.stencil/shared/interfaces/src/entities/condition/condition.interface.d.ts +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ require('./lodash-597bda6d.js');
|
|
|
9
9
|
require('./index-0eb5a03c.js');
|
|
10
10
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
11
11
|
|
|
12
|
-
const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)
|
|
12
|
+
const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)}.outer-container{position:relative;width:100%;min-height:var(--spacing-32, 2rem)}.outer-container.collapsed{max-height:60px;overflow:hidden}.header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:var(--spacing-08, 0.5rem);cursor:pointer}.header-container yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}.header-container .title{padding-right:var(--spacing-08, 0.5rem)}.header-container .title.pdf{padding:0;font-weight:bold}.header-container.button yoo-button{width:6.25rem}.header-container yoo-button.deletable{position:absolute;right:0}.arrow{margin-right:var(--spacing-16, 1rem);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}.arrow.down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.slot-container{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:unset;padding-top:var(--spacing-08, 0.5rem)}.slot-container.collapsed{display:none !important;height:0}:host(.stable) .text-container{color:var(--stable, #adadad)}:host(.stable) .slot-container{color:initial}:host(.padding) .outer-container .text-container{padding:0 var(--spacing-16, 1rem)}:host(.simple) .text-container,:host(.simple) span{padding:0;color:var(--stable, #adadad)}:host(.simple) yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}:host(.form) .outer-container{padding:var(--spacing-08, 0.5rem) 0;padding-top:0;background:transparent}:host(.form) .outer-container:not(.collapsed){width:auto;margin:0}:host(.form) .outer-container.collapsed .text-container{padding:0}:host(.form) .outer-container .text-container{padding:0}:host(.form) .outer-container .text-container .title{padding-left:0;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.form) .outer-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.form) .outer-container .slot-container:not(.collapsed){width:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background-color:var(--stable-ultralight, #fafafa);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--spacing-08, 0.5rem)}:host(.form[header=\"List of tasks\"]) .slot-container:not(.collapsed){padding-top:var(--spacing-16, 1rem)}:host(.form.subform) .outer-container .slot-container:not(.collapsed){border:none;border-top:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:0}:host(.no-padding) .text-container .title{padding:0}:host(.no-padding.lesson-detail:not(.padding)) .text-container{padding:0}:host(.secondary) .text-container{width:100%;padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--dark-20, rgba(0, 0, 0, 0.2))}:host(.secondary) .text-container .title{padding:0;color:var(--dark, #000000);font-weight:bold}:host(.secondary) .text-container yoo-icon{margin-left:auto}:host(.secondary) .slot-container{-webkit-transform:none;transform:none}:host(.transparent){background:transparent}:host(.transparent) .slot-container{padding-top:0.3rem}:host(.center) .outer-container .header-container{-ms-flex-pack:center;justify-content:center}:host(.lesson-detail) .outer-container .text-container{-ms-flex-pack:justify;justify-content:space-between}:host(.lesson-detail) .outer-container .header-container{padding-bottom:var(--spacing-08, 0.5rem)}:host(.lesson-detail) .outer-container .slot-container{padding:0}:host(.bold) .outer-container .title{padding-left:0;font-weight:bold}:host(.subform){margin-top:0 !important;background:transparent}:host(.subform) .outer-container{min-height:auto;padding-bottom:0}:host(.subform) .outer-container .slot-container:not(.collapsed){margin-top:var(--spacing-04, 0.25rem);padding:0}:host(.subform) .outer-container .header-container .title{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
|
|
13
13
|
|
|
14
14
|
const YooCollapsibleComponent = class {
|
|
15
15
|
constructor(hostRef) {
|
|
@@ -10,7 +10,7 @@ const overlays = require('./overlays-e40de213.js');
|
|
|
10
10
|
require('./index-0eb5a03c.js');
|
|
11
11
|
require('./_commonjsHelpers-94df2ea7.js');
|
|
12
12
|
|
|
13
|
-
const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{background:var(--active-tab-background)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:
|
|
13
|
+
const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem);color:var(--active-text-color);white-space:nowrap;border-bottom:var(--tab-border-width) solid var(--tab-border-color);cursor:pointer;-webkit-transition:0.3s ease;transition:0.3s ease}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{color:var(--dark, #000000);background:var(--active-tab-background);border-bottom-color:var(--active-tab-border-color)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host .outer-container{position:relative;height:var(--height-tabs);opacity:var(--opacity-tabs)}:host .outer-container-vertical{--height-tabs:2.5rem;font-size:var(--font-size-16, 1rem);--badge-width-with-spacing:2rem}:host .outer-container-vertical .tab-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container-vertical .tab-container.active{background:none;border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}:host .outer-container-vertical .tab-container.active yoo-icon{fill:var(--app-color, #5a30f4)}:host .outer-container-vertical .tab-container:hover{color:var(--app-color, #5a30f4);background-color:var(--active-tab-background)}:host .outer-container-vertical .tab-header{-ms-flex-pack:left;justify-content:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--height-tabs);padding:var(--spacing-08, 0.5rem);color:var(--dark, #000000);text-align:left}:host .outer-container-vertical .tab-header .flex{-ms-flex:1;flex:1}:host .outer-container-vertical .tab-header .full-width{width:100%}:host .outer-container-vertical .tab-header yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}:host .outer-container-vertical .tab-header .tab-title{width:100%}:host .outer-container-vertical .tab-header .tab-title.plus-one{width:calc(100% - var(--spacing-32, 2rem))}:host .outer-container-vertical .tab-header .tab-title.sandwich{width:calc(100% - var(--spacing-64, 4rem))}:host .outer-container-vertical .tab-description{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);padding-left:calc(var(--spacing-08, 0.5rem) + var(--badge-width-with-spacing));color:var(--text-color);font-size:var(--font-size-14, 0.875rem);white-space:normal}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:0}:host(.web) yoo-ripple-effect{display:none}:host(.web) .tab-container:hover{color:var(--dark, #000000)}:host(.web) .extra:hover{color:var(--app-color, #5a30f4)}:host(.web) .outer-container{margin-top:var(--spacing-08, 0.5rem)}:host(.web.no-margin) .outer-container{margin-top:0}:host(.center){--justify-tabs:center}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) .outer-container,:host([disabled=true]) .outer-container{color:var(--stable, #adadad);opacity:0.4}:host(.no-border) .static-container{border:none}yoo-ripple-effect{--color:var(--app-color, #5a30f4);--opacity:0.1}yoo-icon{-ms-flex-item-align:center;align-self:center;margin-right:0.5625rem}yoo-context-menu.editable{width:var(--icon-size-01, 1rem);margin-left:var(--spacing-08, 0.5rem)}yoo-context-menu.editable yoo-icon{margin-right:0}yoo-button{margin:0 var(--spacing-08, 0.5rem)}span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}yoo-badge,yoo-tag{margin-left:var(--spacing-04, 0.25rem)}yoo-badge.margin-right{margin-right:var(--spacing-08, 0.5rem)}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}yoo-badge:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}.static-container{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;border-bottom:var(--spacing-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.scrolling-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:var(--justify-tabs);justify-content:var(--justify-tabs);width:100%;height:100%}.extra.active{color:var(--app-color, #5a30f4)}:host(.tabs-padding-top) .outer-container-vertical{padding-top:4rem}:host(.big-tabs) .tab-container{padding-bottom:0;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.big-tabs) .tab-container:not(.active){padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.big-tabs) .tab-container.active{background-color:transparent}:host(.big-tabs) .tab-container+.tab-container{margin:0}:host(.big-tabs) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
|
|
14
14
|
|
|
15
15
|
const YooTabsComponent = class {
|
|
16
16
|
constructor(hostRef) {
|
|
@@ -120,14 +120,13 @@ const YooTabsComponent = class {
|
|
|
120
120
|
const icon = tab.icon;
|
|
121
121
|
const tagColor = isActive ? 'app-color-10' : 'text-color-10';
|
|
122
122
|
return [
|
|
123
|
-
index.h("div", { key: 'tab_' + index$1, class: { 'tab-container': true, extra: index$1 >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index$1, event), ref: (el) => (this.tabElements[index$1] = el) }, index.h("span", { class: "full-width" }, this.showBadges && index.h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index$1, isActive), shape: "circle", text: (index$1 + 1).toLocaleString() }), icon && index.h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
|
|
123
|
+
index.h("div", { key: 'tab_' + index$1, class: { 'tab-container': true, extra: index$1 >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index$1, event), ref: (el) => (this.tabElements[index$1] = el) }, index.h("span", { class: "full-width tab-header" }, this.showBadges && index.h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index$1, isActive), shape: "circle", text: (index$1 + 1).toLocaleString() }), icon && index.h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
|
|
124
124
|
? index.h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index$1 && icon
|
|
125
125
|
? 'sandwich'
|
|
126
126
|
: this.isEditable && this.editableOptions && this.tabs.length > index$1 || icon
|
|
127
127
|
? 'plus-one'
|
|
128
128
|
: ''}` }, index.h("yoo-truncated-line", { tooltipPlacement: "auto", content: overlays.translateMulti(tab.title) }))
|
|
129
|
-
: index.h("span", null, overlays.translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index$1 && overlays.isWeb(this.host) && (index.h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index$1) }, index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index$1 && !overlays.isWeb(this.host) && (index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index$1) })), lodash.isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (index.h("yoo-badge", { ref: (el) => (this.notifElements[index$1] = el), color: tagColor, shape: "oval", text: overlays.pipes.number.transform(tab.notif, '', 0) })), lodash.isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (index.h("yoo-tag", { ref: (el) => (this.notifElements[index$1] = el), color: tagColor }, tab.notif)), lodash.isBoolean(tab.notif) && tab.notif == true && !this.isEditable && index.h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && index.h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !overlays.isWeb(this.host) && this.rippleEffect && index.h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index$1] = el) }))
|
|
130
|
-
this.vertical && isActive && tab.description && index.h("div", { class: "tab-description", innerHTML: tab.description })
|
|
129
|
+
: index.h("span", null, overlays.translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index$1 && overlays.isWeb(this.host) && (index.h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index$1) }, index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index$1 && !overlays.isWeb(this.host) && (index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index$1) })), lodash.isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (index.h("yoo-badge", { ref: (el) => (this.notifElements[index$1] = el), color: tagColor, shape: "oval", text: overlays.pipes.number.transform(tab.notif, '', 0) })), lodash.isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (index.h("yoo-tag", { ref: (el) => (this.notifElements[index$1] = el), color: tagColor }, tab.notif)), lodash.isBoolean(tab.notif) && tab.notif == true && !this.isEditable && index.h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && index.h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !overlays.isWeb(this.host) && this.rippleEffect && index.h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index$1] = el) }), this.vertical && isActive && tab.description && index.h("div", { class: "tab-description", innerHTML: tab.description }))
|
|
131
130
|
];
|
|
132
131
|
}
|
|
133
132
|
renderHorizontal() {
|
|
@@ -216,11 +216,26 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
216
216
|
width: 100%;
|
|
217
217
|
overflow: hidden;
|
|
218
218
|
}
|
|
219
|
+
:host .tab-container {
|
|
220
|
+
position: relative;
|
|
221
|
+
display: flex;
|
|
222
|
+
flex: 1;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
padding: 0 var(--spacing-08, 0.5rem);
|
|
226
|
+
color: var(--active-text-color);
|
|
227
|
+
white-space: nowrap;
|
|
228
|
+
border-bottom: var(--tab-border-width) solid var(--tab-border-color);
|
|
229
|
+
cursor: pointer;
|
|
230
|
+
transition: 0.3s ease;
|
|
231
|
+
}
|
|
219
232
|
:host .tab-container yoo-icon {
|
|
220
233
|
fill: var(--text-color, #807f83);
|
|
221
234
|
}
|
|
222
235
|
:host .tab-container.active {
|
|
236
|
+
color: var(--dark, #000000);
|
|
223
237
|
background: var(--active-tab-background);
|
|
238
|
+
border-bottom-color: var(--active-tab-border-color);
|
|
224
239
|
}
|
|
225
240
|
:host .tab-container.active .accent {
|
|
226
241
|
color: var(--accent, #276ef1);
|
|
@@ -285,6 +300,72 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
285
300
|
:host .tab-container.active yoo-icon {
|
|
286
301
|
fill: var(--dark, #000000);
|
|
287
302
|
}
|
|
303
|
+
:host .outer-container {
|
|
304
|
+
position: relative;
|
|
305
|
+
height: var(--height-tabs);
|
|
306
|
+
opacity: var(--opacity-tabs);
|
|
307
|
+
}
|
|
308
|
+
:host .outer-container-vertical {
|
|
309
|
+
--height-tabs: 2.5rem;
|
|
310
|
+
font-size: var(--font-size-16, 1rem);
|
|
311
|
+
--badge-width-with-spacing: 2rem;
|
|
312
|
+
}
|
|
313
|
+
:host .outer-container-vertical .tab-container {
|
|
314
|
+
display: flex;
|
|
315
|
+
flex-direction: column;
|
|
316
|
+
box-sizing: border-box;
|
|
317
|
+
width: 100%;
|
|
318
|
+
padding: 0;
|
|
319
|
+
border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
|
|
320
|
+
}
|
|
321
|
+
:host .outer-container-vertical .tab-container.active {
|
|
322
|
+
background: none;
|
|
323
|
+
border-bottom: var(--tab-border-width) solid var(--active-tab-border-color);
|
|
324
|
+
}
|
|
325
|
+
:host .outer-container-vertical .tab-container.active yoo-icon {
|
|
326
|
+
fill: var(--app-color, #5a30f4);
|
|
327
|
+
}
|
|
328
|
+
:host .outer-container-vertical .tab-container:hover {
|
|
329
|
+
color: var(--app-color, #5a30f4);
|
|
330
|
+
background-color: var(--active-tab-background);
|
|
331
|
+
}
|
|
332
|
+
:host .outer-container-vertical .tab-header {
|
|
333
|
+
justify-content: left;
|
|
334
|
+
box-sizing: border-box;
|
|
335
|
+
width: 100%;
|
|
336
|
+
height: var(--height-tabs);
|
|
337
|
+
padding: var(--spacing-08, 0.5rem);
|
|
338
|
+
color: var(--dark, #000000);
|
|
339
|
+
text-align: left;
|
|
340
|
+
}
|
|
341
|
+
:host .outer-container-vertical .tab-header .flex {
|
|
342
|
+
flex: 1;
|
|
343
|
+
}
|
|
344
|
+
:host .outer-container-vertical .tab-header .full-width {
|
|
345
|
+
width: 100%;
|
|
346
|
+
}
|
|
347
|
+
:host .outer-container-vertical .tab-header yoo-icon {
|
|
348
|
+
margin-right: var(--spacing-08, 0.5rem);
|
|
349
|
+
fill: var(--text-color, #807f83);
|
|
350
|
+
}
|
|
351
|
+
:host .outer-container-vertical .tab-header .tab-title {
|
|
352
|
+
width: 100%;
|
|
353
|
+
}
|
|
354
|
+
:host .outer-container-vertical .tab-header .tab-title.plus-one {
|
|
355
|
+
width: calc(100% - var(--spacing-32, 2rem));
|
|
356
|
+
}
|
|
357
|
+
:host .outer-container-vertical .tab-header .tab-title.sandwich {
|
|
358
|
+
width: calc(100% - var(--spacing-64, 4rem));
|
|
359
|
+
}
|
|
360
|
+
:host .outer-container-vertical .tab-description {
|
|
361
|
+
box-sizing: border-box;
|
|
362
|
+
max-width: 100%;
|
|
363
|
+
padding: 0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
|
|
364
|
+
padding-left: calc(var(--spacing-08, 0.5rem) + var(--badge-width-with-spacing));
|
|
365
|
+
color: var(--text-color);
|
|
366
|
+
font-size: var(--font-size-14, 0.875rem);
|
|
367
|
+
white-space: normal;
|
|
368
|
+
}
|
|
288
369
|
|
|
289
370
|
/**
|
|
290
371
|
* -- host(.transparent) : Host Class .transparent
|
|
@@ -304,7 +385,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
|
|
|
304
385
|
padding: var(--tab-padding);
|
|
305
386
|
}
|
|
306
387
|
:host(.web) .outer-container-vertical .tab-container {
|
|
307
|
-
padding:
|
|
388
|
+
padding: 0;
|
|
308
389
|
}
|
|
309
390
|
:host(.web) yoo-ripple-effect {
|
|
310
391
|
display: none;
|
|
@@ -389,63 +470,6 @@ yoo-tag {
|
|
|
389
470
|
align-self: center;
|
|
390
471
|
}
|
|
391
472
|
|
|
392
|
-
.outer-container {
|
|
393
|
-
position: relative;
|
|
394
|
-
height: var(--height-tabs);
|
|
395
|
-
opacity: var(--opacity-tabs);
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
.outer-container-vertical {
|
|
399
|
-
font-size: var(--font-size-16, 1rem);
|
|
400
|
-
}
|
|
401
|
-
.outer-container-vertical .tab-container {
|
|
402
|
-
justify-content: left;
|
|
403
|
-
box-sizing: border-box;
|
|
404
|
-
width: 100%;
|
|
405
|
-
height: 2.5rem;
|
|
406
|
-
height: var(--height-tabs);
|
|
407
|
-
padding: var(--spacing-08, 0.5rem);
|
|
408
|
-
color: var(--dark, #000000);
|
|
409
|
-
text-align: left;
|
|
410
|
-
}
|
|
411
|
-
.outer-container-vertical .tab-container:hover {
|
|
412
|
-
color: var(--app-color, #5a30f4);
|
|
413
|
-
}
|
|
414
|
-
.outer-container-vertical .tab-container .flex {
|
|
415
|
-
flex: 1;
|
|
416
|
-
}
|
|
417
|
-
.outer-container-vertical .tab-container .full-width {
|
|
418
|
-
width: 100%;
|
|
419
|
-
}
|
|
420
|
-
.outer-container-vertical .tab-container yoo-icon {
|
|
421
|
-
margin-right: var(--spacing-08, 0.5rem);
|
|
422
|
-
fill: var(--text-color, #807f83);
|
|
423
|
-
}
|
|
424
|
-
.outer-container-vertical .tab-container.active {
|
|
425
|
-
color: var(--app-color, #5a30f4);
|
|
426
|
-
}
|
|
427
|
-
.outer-container-vertical .tab-container.active yoo-icon {
|
|
428
|
-
fill: var(--app-color, #5a30f4);
|
|
429
|
-
}
|
|
430
|
-
.outer-container-vertical .tab-container .tab-title {
|
|
431
|
-
width: 100%;
|
|
432
|
-
}
|
|
433
|
-
.outer-container-vertical .tab-container .tab-title.plus-one {
|
|
434
|
-
width: calc(100% - var(--spacing-32, 2rem));
|
|
435
|
-
}
|
|
436
|
-
.outer-container-vertical .tab-container .tab-title.sandwich {
|
|
437
|
-
width: calc(100% - var(--spacing-64, 4rem));
|
|
438
|
-
}
|
|
439
|
-
.outer-container-vertical .tab-container + .tab-container {
|
|
440
|
-
margin-top: var(--vertical-tab-gap);
|
|
441
|
-
}
|
|
442
|
-
.outer-container-vertical .tab-description {
|
|
443
|
-
padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
|
|
444
|
-
color: var(--text-color);
|
|
445
|
-
font-size: var(--font-size-14, 0.875rem);
|
|
446
|
-
border-bottom: var(--tab-border-width) solid var(--tab-border-color);
|
|
447
|
-
}
|
|
448
|
-
|
|
449
473
|
.static-container {
|
|
450
474
|
position: absolute;
|
|
451
475
|
box-sizing: border-box;
|
|
@@ -463,25 +487,6 @@ yoo-tag {
|
|
|
463
487
|
height: 100%;
|
|
464
488
|
}
|
|
465
489
|
|
|
466
|
-
.tab-container {
|
|
467
|
-
position: relative;
|
|
468
|
-
display: flex;
|
|
469
|
-
flex: 1;
|
|
470
|
-
align-items: center;
|
|
471
|
-
justify-content: center;
|
|
472
|
-
padding: 0 var(--spacing-08, 0.5rem);
|
|
473
|
-
color: var(--active-text-color);
|
|
474
|
-
white-space: nowrap;
|
|
475
|
-
border-bottom: var(--tab-border-width) solid var(--tab-border-color);
|
|
476
|
-
cursor: pointer;
|
|
477
|
-
transition: 0.3s ease;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
.tab-container.active {
|
|
481
|
-
color: var(--dark, #000000);
|
|
482
|
-
border-bottom-color: var(--active-tab-border-color);
|
|
483
|
-
}
|
|
484
|
-
|
|
485
490
|
.extra.active {
|
|
486
491
|
color: var(--app-color, #5a30f4);
|
|
487
492
|
}
|
|
@@ -114,7 +114,7 @@ export class YooTabsComponent {
|
|
|
114
114
|
const tagColor = isActive ? 'app-color-10' : 'text-color-10';
|
|
115
115
|
return [
|
|
116
116
|
h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) },
|
|
117
|
-
h("span", { class: "full-width" },
|
|
117
|
+
h("span", { class: "full-width tab-header" },
|
|
118
118
|
this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }),
|
|
119
119
|
icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }),
|
|
120
120
|
this.vertical
|
|
@@ -132,8 +132,8 @@ export class YooTabsComponent {
|
|
|
132
132
|
isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)),
|
|
133
133
|
isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }),
|
|
134
134
|
this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })),
|
|
135
|
-
!isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) })
|
|
136
|
-
|
|
135
|
+
!isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) }),
|
|
136
|
+
this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description }))
|
|
137
137
|
];
|
|
138
138
|
}
|
|
139
139
|
renderHorizontal() {
|
|
@@ -5,7 +5,7 @@ import './lodash-9e6ab91e.js';
|
|
|
5
5
|
import './index-58b8d008.js';
|
|
6
6
|
import './_commonjsHelpers-f4d11124.js';
|
|
7
7
|
|
|
8
|
-
const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)
|
|
8
|
+
const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)}.outer-container{position:relative;width:100%;min-height:var(--spacing-32, 2rem)}.outer-container.collapsed{max-height:60px;overflow:hidden}.header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:var(--spacing-08, 0.5rem);cursor:pointer}.header-container yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}.header-container .title{padding-right:var(--spacing-08, 0.5rem)}.header-container .title.pdf{padding:0;font-weight:bold}.header-container.button yoo-button{width:6.25rem}.header-container yoo-button.deletable{position:absolute;right:0}.arrow{margin-right:var(--spacing-16, 1rem);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}.arrow.down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.slot-container{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:unset;padding-top:var(--spacing-08, 0.5rem)}.slot-container.collapsed{display:none !important;height:0}:host(.stable) .text-container{color:var(--stable, #adadad)}:host(.stable) .slot-container{color:initial}:host(.padding) .outer-container .text-container{padding:0 var(--spacing-16, 1rem)}:host(.simple) .text-container,:host(.simple) span{padding:0;color:var(--stable, #adadad)}:host(.simple) yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}:host(.form) .outer-container{padding:var(--spacing-08, 0.5rem) 0;padding-top:0;background:transparent}:host(.form) .outer-container:not(.collapsed){width:auto;margin:0}:host(.form) .outer-container.collapsed .text-container{padding:0}:host(.form) .outer-container .text-container{padding:0}:host(.form) .outer-container .text-container .title{padding-left:0;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.form) .outer-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.form) .outer-container .slot-container:not(.collapsed){width:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background-color:var(--stable-ultralight, #fafafa);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--spacing-08, 0.5rem)}:host(.form[header=\"List of tasks\"]) .slot-container:not(.collapsed){padding-top:var(--spacing-16, 1rem)}:host(.form.subform) .outer-container .slot-container:not(.collapsed){border:none;border-top:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:0}:host(.no-padding) .text-container .title{padding:0}:host(.no-padding.lesson-detail:not(.padding)) .text-container{padding:0}:host(.secondary) .text-container{width:100%;padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--dark-20, rgba(0, 0, 0, 0.2))}:host(.secondary) .text-container .title{padding:0;color:var(--dark, #000000);font-weight:bold}:host(.secondary) .text-container yoo-icon{margin-left:auto}:host(.secondary) .slot-container{-webkit-transform:none;transform:none}:host(.transparent){background:transparent}:host(.transparent) .slot-container{padding-top:0.3rem}:host(.center) .outer-container .header-container{-ms-flex-pack:center;justify-content:center}:host(.lesson-detail) .outer-container .text-container{-ms-flex-pack:justify;justify-content:space-between}:host(.lesson-detail) .outer-container .header-container{padding-bottom:var(--spacing-08, 0.5rem)}:host(.lesson-detail) .outer-container .slot-container{padding:0}:host(.bold) .outer-container .title{padding-left:0;font-weight:bold}:host(.subform){margin-top:0 !important;background:transparent}:host(.subform) .outer-container{min-height:auto;padding-bottom:0}:host(.subform) .outer-container .slot-container:not(.collapsed){margin-top:var(--spacing-04, 0.25rem);padding:0}:host(.subform) .outer-container .header-container .title{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
|
|
9
9
|
|
|
10
10
|
const YooCollapsibleComponent = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ import { f as isNativeMobile, x as isIOS, dH as safeScrollIntoView, a8 as showAc
|
|
|
6
6
|
import './index-58b8d008.js';
|
|
7
7
|
import './_commonjsHelpers-f4d11124.js';
|
|
8
8
|
|
|
9
|
-
const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{background:var(--active-tab-background)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:
|
|
9
|
+
const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem);color:var(--active-text-color);white-space:nowrap;border-bottom:var(--tab-border-width) solid var(--tab-border-color);cursor:pointer;-webkit-transition:0.3s ease;transition:0.3s ease}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{color:var(--dark, #000000);background:var(--active-tab-background);border-bottom-color:var(--active-tab-border-color)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host .outer-container{position:relative;height:var(--height-tabs);opacity:var(--opacity-tabs)}:host .outer-container-vertical{--height-tabs:2.5rem;font-size:var(--font-size-16, 1rem);--badge-width-with-spacing:2rem}:host .outer-container-vertical .tab-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container-vertical .tab-container.active{background:none;border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}:host .outer-container-vertical .tab-container.active yoo-icon{fill:var(--app-color, #5a30f4)}:host .outer-container-vertical .tab-container:hover{color:var(--app-color, #5a30f4);background-color:var(--active-tab-background)}:host .outer-container-vertical .tab-header{-ms-flex-pack:left;justify-content:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--height-tabs);padding:var(--spacing-08, 0.5rem);color:var(--dark, #000000);text-align:left}:host .outer-container-vertical .tab-header .flex{-ms-flex:1;flex:1}:host .outer-container-vertical .tab-header .full-width{width:100%}:host .outer-container-vertical .tab-header yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}:host .outer-container-vertical .tab-header .tab-title{width:100%}:host .outer-container-vertical .tab-header .tab-title.plus-one{width:calc(100% - var(--spacing-32, 2rem))}:host .outer-container-vertical .tab-header .tab-title.sandwich{width:calc(100% - var(--spacing-64, 4rem))}:host .outer-container-vertical .tab-description{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);padding-left:calc(var(--spacing-08, 0.5rem) + var(--badge-width-with-spacing));color:var(--text-color);font-size:var(--font-size-14, 0.875rem);white-space:normal}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:0}:host(.web) yoo-ripple-effect{display:none}:host(.web) .tab-container:hover{color:var(--dark, #000000)}:host(.web) .extra:hover{color:var(--app-color, #5a30f4)}:host(.web) .outer-container{margin-top:var(--spacing-08, 0.5rem)}:host(.web.no-margin) .outer-container{margin-top:0}:host(.center){--justify-tabs:center}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) .outer-container,:host([disabled=true]) .outer-container{color:var(--stable, #adadad);opacity:0.4}:host(.no-border) .static-container{border:none}yoo-ripple-effect{--color:var(--app-color, #5a30f4);--opacity:0.1}yoo-icon{-ms-flex-item-align:center;align-self:center;margin-right:0.5625rem}yoo-context-menu.editable{width:var(--icon-size-01, 1rem);margin-left:var(--spacing-08, 0.5rem)}yoo-context-menu.editable yoo-icon{margin-right:0}yoo-button{margin:0 var(--spacing-08, 0.5rem)}span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}yoo-badge,yoo-tag{margin-left:var(--spacing-04, 0.25rem)}yoo-badge.margin-right{margin-right:var(--spacing-08, 0.5rem)}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}yoo-badge:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}.static-container{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;border-bottom:var(--spacing-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.scrolling-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:var(--justify-tabs);justify-content:var(--justify-tabs);width:100%;height:100%}.extra.active{color:var(--app-color, #5a30f4)}:host(.tabs-padding-top) .outer-container-vertical{padding-top:4rem}:host(.big-tabs) .tab-container{padding-bottom:0;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.big-tabs) .tab-container:not(.active){padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.big-tabs) .tab-container.active{background-color:transparent}:host(.big-tabs) .tab-container+.tab-container{margin:0}:host(.big-tabs) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
|
|
10
10
|
|
|
11
11
|
const YooTabsComponent = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -116,14 +116,13 @@ const YooTabsComponent = class {
|
|
|
116
116
|
const icon = tab.icon;
|
|
117
117
|
const tagColor = isActive ? 'app-color-10' : 'text-color-10';
|
|
118
118
|
return [
|
|
119
|
-
h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) }, h("span", { class: "full-width" }, this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }), icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
|
|
119
|
+
h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) }, h("span", { class: "full-width tab-header" }, this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }), icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
|
|
120
120
|
? h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index && icon
|
|
121
121
|
? 'sandwich'
|
|
122
122
|
: this.isEditable && this.editableOptions && this.tabs.length > index || icon
|
|
123
123
|
? 'plus-one'
|
|
124
124
|
: ''}` }, h("yoo-truncated-line", { tooltipPlacement: "auto", content: translateMulti(tab.title) }))
|
|
125
|
-
: h("span", null, translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) }, h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })), isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })), isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)), isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) }))
|
|
126
|
-
this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description })
|
|
125
|
+
: h("span", null, translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) }, h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })), isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })), isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)), isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) }), this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description }))
|
|
127
126
|
];
|
|
128
127
|
}
|
|
129
128
|
renderHorizontal() {
|
|
@@ -5,7 +5,7 @@ import './lodash-9e6ab91e.js';
|
|
|
5
5
|
import './index-58b8d008.js';
|
|
6
6
|
import './_commonjsHelpers-f4d11124.js';
|
|
7
7
|
|
|
8
|
-
const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)
|
|
8
|
+
const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000)}.outer-container{position:relative;width:100%;min-height:var(--spacing-32, 2rem)}.outer-container.collapsed{max-height:60px;overflow:hidden}.header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:var(--spacing-08, 0.5rem);cursor:pointer}.header-container yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}.header-container .title{padding-right:var(--spacing-08, 0.5rem)}.header-container .title.pdf{padding:0;font-weight:bold}.header-container.button yoo-button{width:6.25rem}.header-container yoo-button.deletable{position:absolute;right:0}.arrow{margin-right:var(--spacing-16, 1rem);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}.arrow.down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.slot-container{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:unset;padding-top:var(--spacing-08, 0.5rem)}.slot-container.collapsed{display:none !important;height:0}:host(.stable) .text-container{color:var(--stable, #adadad)}:host(.stable) .slot-container{color:initial}:host(.padding) .outer-container .text-container{padding:0 var(--spacing-16, 1rem)}:host(.simple) .text-container,:host(.simple) span{padding:0;color:var(--stable, #adadad)}:host(.simple) yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}:host(.form) .outer-container{padding:var(--spacing-08, 0.5rem) 0;padding-top:0;background:transparent}:host(.form) .outer-container:not(.collapsed){width:auto;margin:0}:host(.form) .outer-container.collapsed .text-container{padding:0}:host(.form) .outer-container .text-container{padding:0}:host(.form) .outer-container .text-container .title{padding-left:0;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.form) .outer-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.form) .outer-container .slot-container:not(.collapsed){width:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background-color:var(--stable-ultralight, #fafafa);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--spacing-08, 0.5rem)}:host(.form[header=\"List of tasks\"]) .slot-container:not(.collapsed){padding-top:var(--spacing-16, 1rem)}:host(.form.subform) .outer-container .slot-container:not(.collapsed){border:none;border-top:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:0}:host(.no-padding) .text-container .title{padding:0}:host(.no-padding.lesson-detail:not(.padding)) .text-container{padding:0}:host(.secondary) .text-container{width:100%;padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--dark-20, rgba(0, 0, 0, 0.2))}:host(.secondary) .text-container .title{padding:0;color:var(--dark, #000000);font-weight:bold}:host(.secondary) .text-container yoo-icon{margin-left:auto}:host(.secondary) .slot-container{-webkit-transform:none;transform:none}:host(.transparent){background:transparent}:host(.transparent) .slot-container{padding-top:0.3rem}:host(.center) .outer-container .header-container{-ms-flex-pack:center;justify-content:center}:host(.lesson-detail) .outer-container .text-container{-ms-flex-pack:justify;justify-content:space-between}:host(.lesson-detail) .outer-container .header-container{padding-bottom:var(--spacing-08, 0.5rem)}:host(.lesson-detail) .outer-container .slot-container{padding:0}:host(.bold) .outer-container .title{padding-left:0;font-weight:bold}:host(.subform){margin-top:0 !important;background:transparent}:host(.subform) .outer-container{min-height:auto;padding-bottom:0}:host(.subform) .outer-container .slot-container:not(.collapsed){margin-top:var(--spacing-04, 0.25rem);padding:0}:host(.subform) .outer-container .header-container .title{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
|
|
9
9
|
|
|
10
10
|
const YooCollapsibleComponent = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ import { f as isNativeMobile, x as isIOS, dH as safeScrollIntoView, a8 as showAc
|
|
|
6
6
|
import './index-58b8d008.js';
|
|
7
7
|
import './_commonjsHelpers-f4d11124.js';
|
|
8
8
|
|
|
9
|
-
const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{background:var(--active-tab-background)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:
|
|
9
|
+
const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem);color:var(--active-text-color);white-space:nowrap;border-bottom:var(--tab-border-width) solid var(--tab-border-color);cursor:pointer;-webkit-transition:0.3s ease;transition:0.3s ease}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{color:var(--dark, #000000);background:var(--active-tab-background);border-bottom-color:var(--active-tab-border-color)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host .outer-container{position:relative;height:var(--height-tabs);opacity:var(--opacity-tabs)}:host .outer-container-vertical{--height-tabs:2.5rem;font-size:var(--font-size-16, 1rem);--badge-width-with-spacing:2rem}:host .outer-container-vertical .tab-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container-vertical .tab-container.active{background:none;border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}:host .outer-container-vertical .tab-container.active yoo-icon{fill:var(--app-color, #5a30f4)}:host .outer-container-vertical .tab-container:hover{color:var(--app-color, #5a30f4);background-color:var(--active-tab-background)}:host .outer-container-vertical .tab-header{-ms-flex-pack:left;justify-content:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--height-tabs);padding:var(--spacing-08, 0.5rem);color:var(--dark, #000000);text-align:left}:host .outer-container-vertical .tab-header .flex{-ms-flex:1;flex:1}:host .outer-container-vertical .tab-header .full-width{width:100%}:host .outer-container-vertical .tab-header yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}:host .outer-container-vertical .tab-header .tab-title{width:100%}:host .outer-container-vertical .tab-header .tab-title.plus-one{width:calc(100% - var(--spacing-32, 2rem))}:host .outer-container-vertical .tab-header .tab-title.sandwich{width:calc(100% - var(--spacing-64, 4rem))}:host .outer-container-vertical .tab-description{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);padding-left:calc(var(--spacing-08, 0.5rem) + var(--badge-width-with-spacing));color:var(--text-color);font-size:var(--font-size-14, 0.875rem);white-space:normal}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:0}:host(.web) yoo-ripple-effect{display:none}:host(.web) .tab-container:hover{color:var(--dark, #000000)}:host(.web) .extra:hover{color:var(--app-color, #5a30f4)}:host(.web) .outer-container{margin-top:var(--spacing-08, 0.5rem)}:host(.web.no-margin) .outer-container{margin-top:0}:host(.center){--justify-tabs:center}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) .outer-container,:host([disabled=true]) .outer-container{color:var(--stable, #adadad);opacity:0.4}:host(.no-border) .static-container{border:none}yoo-ripple-effect{--color:var(--app-color, #5a30f4);--opacity:0.1}yoo-icon{-ms-flex-item-align:center;align-self:center;margin-right:0.5625rem}yoo-context-menu.editable{width:var(--icon-size-01, 1rem);margin-left:var(--spacing-08, 0.5rem)}yoo-context-menu.editable yoo-icon{margin-right:0}yoo-button{margin:0 var(--spacing-08, 0.5rem)}span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}yoo-badge,yoo-tag{margin-left:var(--spacing-04, 0.25rem)}yoo-badge.margin-right{margin-right:var(--spacing-08, 0.5rem)}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}yoo-badge:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}.static-container{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;border-bottom:var(--spacing-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.scrolling-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:var(--justify-tabs);justify-content:var(--justify-tabs);width:100%;height:100%}.extra.active{color:var(--app-color, #5a30f4)}:host(.tabs-padding-top) .outer-container-vertical{padding-top:4rem}:host(.big-tabs) .tab-container{padding-bottom:0;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.big-tabs) .tab-container:not(.active){padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.big-tabs) .tab-container.active{background-color:transparent}:host(.big-tabs) .tab-container+.tab-container{margin:0}:host(.big-tabs) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
|
|
10
10
|
|
|
11
11
|
const YooTabsComponent = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -116,14 +116,13 @@ const YooTabsComponent = class {
|
|
|
116
116
|
const icon = tab.icon;
|
|
117
117
|
const tagColor = isActive ? 'app-color-10' : 'text-color-10';
|
|
118
118
|
return [
|
|
119
|
-
h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) }, h("span", { class: "full-width" }, this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }), icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
|
|
119
|
+
h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) }, h("span", { class: "full-width tab-header" }, this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }), icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
|
|
120
120
|
? h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index && icon
|
|
121
121
|
? 'sandwich'
|
|
122
122
|
: this.isEditable && this.editableOptions && this.tabs.length > index || icon
|
|
123
123
|
? 'plus-one'
|
|
124
124
|
: ''}` }, h("yoo-truncated-line", { tooltipPlacement: "auto", content: translateMulti(tab.title) }))
|
|
125
|
-
: h("span", null, translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) }, h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })), isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })), isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)), isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) }))
|
|
126
|
-
this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description })
|
|
125
|
+
: h("span", null, translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) }, h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })), isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })), isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)), isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) }), this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description }))
|
|
127
126
|
];
|
|
128
127
|
}
|
|
129
128
|
renderHorizontal() {
|
|
@@ -31,7 +31,7 @@ export declare class IConditionalField extends IEntity {
|
|
|
31
31
|
export declare type ConditionType = 'field' | 'tags' | 'groups';
|
|
32
32
|
export declare type ConditionOperator = 'notequals' | 'equals' | 'in' | 'notin' | 'greaterthan' | 'lessthan' | 'between';
|
|
33
33
|
export declare type ConditionValue = 'fieldvalue' | 'truefalse' | 'string' | 'number' | 'date' | 'time' | 'datetime';
|
|
34
|
-
export declare type TROLE = 'academy' | 'academyplus' | 'admin' | 'aisle' | 'anonymous' | 'appcreator' | 'appcreatorplus' | 'appmixer' | 'archiver' | 'audienceimport' | 'bi' | 'bluetooth' | 'boost_admin' | 'boost_ai' | 'boost_battle' | 'boost_collaboration' | 'boost_incentive' | 'boost_knowledgebase' | 'boost_manager' | 'boost_microlearning' | 'boost_learning_manager' | 'boost_yext' | 'calendaruser' | 'campaigntodo' | 'clientadmin' | 'communityassociate' | 'communitycreator' | 'communityuser' | 'creator' | 'dashboard' | 'dataset' | 'doccreator' | 'documentsuser' | 'employeedirectory' | 'eventcreator' | 'followup' | 'followupnouser' | 'healthscore' | 'homestoreinsights' | 'imagereco' | 'instagram' | 'inventory' | 'kiosk' | 'knowledgelibrary' | 'liveshopping' | 'liveshoppingmanager' | 'livevideo' | 'manager' | 'missionanalysis' | 'missionviewer' | 'newscreator' | 'newsfeeduser' | 'newspublisher' | 'newsuser' | 'nochat' | 'nodirectchat' | 'nogroupchat' | 'noleaderboard' | 'nopublicevent' | 'nopublisher' | 'nosharebyemail' | 'pharmaone' | 'polluser' | 'pricecheck' | 'productbatch' | 'profilenoedit' | 'project' | 'projecteditor' | 'quicktask' | 'quicktask_mobile' | 'quora' | 'reportbuilder' | 'retailnext' | 'ROLEADMIN' | 'ROLEEDITOR' | 'ROLEFIELD' | 'ROLEMANAGER' | 'ROLESTORE' | 'ROLESTOREMANAGER' | 'ROLEVIEWER' | 'salesai' | 'scandit' | 'scheduler' | 'score' | 'scorm' | 'service' | 'serviceuser' | 'socialsharing' | 'sso' | 'stat' | 'statservice' | 'storeinsights' | 'superadmin' | 'supervisor' | 'taskassign' | 'taskcreator' | 'taskuser' | 'team' | 'teamplus' | 'todo' | 'todolocation' | 'trial' | 'videocall' | 'viewstat' | 'virtualshopping' | 'virtualshoppingstat' | 'visit' | 'visitmanager' | 'waitlist' | 'waitliststat' | 'workflow' | 'workplace' | 'yoobic';
|
|
34
|
+
export declare type TROLE = 'academy' | 'academyplus' | 'admin' | 'aisle' | 'anonymous' | 'appcreator' | 'appcreatorplus' | 'appmixer' | 'archiver' | 'audienceimport' | 'bi' | 'bluetooth' | 'boost_admin' | 'boost_ai' | 'boost_battle' | 'boost_collaboration' | 'boost_incentive' | 'boost_knowledgebase' | 'boost_manager' | 'boost_microlearning' | 'boost_learning_manager' | 'boost_yext' | 'calendaruser' | 'campaigntodo' | 'clientadmin' | 'communityassociate' | 'communitycreator' | 'communityuser' | 'creator' | 'dashboard' | 'dataset' | 'doccreator' | 'documentsuser' | 'employeedirectory' | 'eventcreator' | 'followup' | 'followupnouser' | 'healthscore' | 'homestoreinsights' | 'imagereco' | 'instagram' | 'inventory' | 'kiosk' | 'knowledgelibrary' | 'liveshopping' | 'liveshoppingmanager' | 'livevideo' | 'manager' | 'missionanalysis' | 'missionviewer' | 'newscreator' | 'newsassociate' | 'newsfeeduser' | 'newspublisher' | 'newsuser' | 'nochat' | 'nodirectchat' | 'nogroupchat' | 'noleaderboard' | 'nopublicevent' | 'nopublisher' | 'nosharebyemail' | 'pharmaone' | 'polluser' | 'pricecheck' | 'productbatch' | 'profilenoedit' | 'project' | 'projecteditor' | 'quicktask' | 'quicktask_mobile' | 'quora' | 'reportbuilder' | 'retailnext' | 'ROLEADMIN' | 'ROLEEDITOR' | 'ROLEFIELD' | 'ROLEMANAGER' | 'ROLESTORE' | 'ROLESTOREMANAGER' | 'ROLEVIEWER' | 'salesai' | 'scandit' | 'scheduler' | 'score' | 'scorm' | 'service' | 'serviceuser' | 'socialsharing' | 'sso' | 'stat' | 'statservice' | 'storeinsights' | 'superadmin' | 'supervisor' | 'taskassign' | 'taskcreator' | 'taskuser' | 'team' | 'teamplus' | 'todo' | 'todolocation' | 'trial' | 'videocall' | 'viewstat' | 'virtualshopping' | 'virtualshoppingstat' | 'visit' | 'visitmanager' | 'waitlist' | 'waitliststat' | 'workflow' | 'workplace' | 'yoobic';
|
|
35
35
|
export declare const ROLES: TROLE[];
|
|
36
36
|
export declare type TPermissionConfig = Record<TAppPermission, {
|
|
37
37
|
requiredRoles?: TROLE[];
|