desy-angular 5.0.0 → 5.0.1
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/bundles/desy-angular.umd.js +144 -142
- package/bundles/desy-angular.umd.js.map +1 -1
- package/bundles/desy-angular.umd.min.js +1 -1
- package/bundles/desy-angular.umd.min.js.map +1 -1
- package/desy-angular.metadata.json +1 -1
- package/esm2015/lib/desy-buttons/components/dropdown/dropdown.component.js +70 -70
- package/esm2015/lib/desy-buttons/components/listbox/listbox-label/listbox-label.component.js +6 -15
- package/esm2015/lib/desy-buttons/components/listbox/listbox.component.js +67 -55
- package/esm2015/lib/desy-nav/components/menu-vertical/menu-vertical.component.js +2 -2
- package/esm2015/lib/desy-nav/components/menubar/menubar.component.js +1 -1
- package/fesm2015/desy-angular.js +140 -138
- package/fesm2015/desy-angular.js.map +1 -1
- package/lib/desy-buttons/components/dropdown/dropdown.component.d.ts +4 -7
- package/lib/desy-buttons/components/listbox/listbox-label/listbox-label.component.d.ts +2 -6
- package/lib/desy-buttons/components/listbox/listbox.component.d.ts +1 -2
- package/package.json +1 -1
|
@@ -700,101 +700,100 @@
|
|
|
700
700
|
function DropdownComponent() {
|
|
701
701
|
var _this = _super.apply(this, __spread(arguments)) || this;
|
|
702
702
|
_this.clickEvent = new i0.EventEmitter();
|
|
703
|
-
_this.
|
|
703
|
+
_this.isOpen = false;
|
|
704
704
|
_this.clickOutsideEnabled = false;
|
|
705
705
|
return _this;
|
|
706
706
|
}
|
|
707
707
|
DropdownComponent.prototype.ngOnInit = function () {
|
|
708
|
-
var
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
onHide: function () {
|
|
740
|
-
document.removeEventListener('keydown', onKeyDown);
|
|
741
|
-
},
|
|
742
|
-
};
|
|
743
|
-
},
|
|
744
|
-
}],
|
|
745
|
-
role: false,
|
|
746
|
-
aria: {
|
|
747
|
-
content: 'auto',
|
|
748
|
-
},
|
|
749
|
-
onShown: function (instance) {
|
|
750
|
-
var firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
|
|
751
|
-
if (firstFocusable) {
|
|
752
|
-
setTimeout(function () { return firstFocusable.focus(); });
|
|
708
|
+
var contentTooltip;
|
|
709
|
+
if (this.dropdownContent && this.dropdownContent.nativeElement) {
|
|
710
|
+
contentTooltip = this.dropdownContent.nativeElement;
|
|
711
|
+
contentTooltip.style.display = 'block';
|
|
712
|
+
this.tippyProperties = {
|
|
713
|
+
placement: 'bottom-start',
|
|
714
|
+
inlinePositioning: true,
|
|
715
|
+
content: contentTooltip,
|
|
716
|
+
allowHTML: true,
|
|
717
|
+
trigger: 'click',
|
|
718
|
+
hideOnClick: true,
|
|
719
|
+
interactive: true,
|
|
720
|
+
arrow: false,
|
|
721
|
+
offset: [0, -10],
|
|
722
|
+
theme: '',
|
|
723
|
+
plugins: [
|
|
724
|
+
{
|
|
725
|
+
name: 'hideOnPopperBlur',
|
|
726
|
+
defaultValue: true,
|
|
727
|
+
fn: function (instance) {
|
|
728
|
+
return {
|
|
729
|
+
onCreate: function () {
|
|
730
|
+
instance.popper.addEventListener('focusout', function (event) {
|
|
731
|
+
if (instance.props.hideOnPopperBlur &&
|
|
732
|
+
event.relatedTarget &&
|
|
733
|
+
!instance.popper.contains(event.relatedTarget)) {
|
|
734
|
+
instance.hide();
|
|
735
|
+
}
|
|
736
|
+
});
|
|
737
|
+
},
|
|
738
|
+
};
|
|
753
739
|
}
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
name: 'hideOnEsc',
|
|
743
|
+
defaultValue: true,
|
|
744
|
+
fn: function (_a) {
|
|
745
|
+
var hide = _a.hide;
|
|
746
|
+
function onKeyDown(event) {
|
|
747
|
+
if (event.key === DropdownComponent.KEY_CODE_ESC) {
|
|
748
|
+
hide();
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
return {
|
|
752
|
+
onShow: function () {
|
|
753
|
+
document.addEventListener('keydown', onKeyDown);
|
|
754
|
+
},
|
|
755
|
+
onHide: function () {
|
|
756
|
+
document.removeEventListener('keydown', onKeyDown);
|
|
757
|
+
},
|
|
758
|
+
};
|
|
759
|
+
},
|
|
754
760
|
}
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
761
|
+
],
|
|
762
|
+
role: false,
|
|
763
|
+
aria: {
|
|
764
|
+
content: 'auto',
|
|
765
|
+
},
|
|
766
|
+
onShown: function (instance) {
|
|
767
|
+
var firstFocusable = FocusUtils.getFirstFocusableElement(contentTooltip);
|
|
768
|
+
if (firstFocusable) {
|
|
769
|
+
firstFocusable.focus();
|
|
770
|
+
}
|
|
771
|
+
}
|
|
772
|
+
};
|
|
762
773
|
}
|
|
763
774
|
};
|
|
764
775
|
DropdownComponent.prototype.onClick = function (event) {
|
|
765
776
|
if (!this.isDisabled()) {
|
|
766
|
-
this.toggleDropdown();
|
|
767
777
|
this.clickEvent.emit(event);
|
|
768
778
|
}
|
|
769
779
|
};
|
|
770
|
-
DropdownComponent.prototype.
|
|
771
|
-
|
|
772
|
-
this.show = !this.show;
|
|
773
|
-
setTimeout(function () { return _this.clickOutsideEnabled = _this.show; });
|
|
774
|
-
};
|
|
775
|
-
DropdownComponent.prototype.closeDropdown = function () {
|
|
776
|
-
this.show = false;
|
|
777
|
-
this.clickOutsideEnabled = false;
|
|
780
|
+
DropdownComponent.prototype.setOpen = function (isOpen) {
|
|
781
|
+
this.isOpen = isOpen;
|
|
778
782
|
};
|
|
779
783
|
DropdownComponent.prototype.isDisabled = function () {
|
|
780
784
|
return this.disabled ? true : null;
|
|
781
785
|
};
|
|
782
|
-
DropdownComponent.prototype.onKeyDown = function (event) {
|
|
783
|
-
if (event.key === DropdownComponent.KEY_CODE_ESC) {
|
|
784
|
-
this.closeDropdown();
|
|
785
|
-
}
|
|
786
|
-
};
|
|
787
786
|
return DropdownComponent;
|
|
788
787
|
}(AccessibilityAndContentRequiredComponent));
|
|
789
788
|
DropdownComponent.KEY_CODE_ESC = 'Escape';
|
|
790
789
|
DropdownComponent.decorators = [
|
|
791
790
|
{ type: i0.Component, args: [{
|
|
792
791
|
selector: 'desy-dropdown',
|
|
793
|
-
template: "
|
|
792
|
+
template: "<div [class]=\"classesContainer ? classesContainer : 'relative'\"\r\n (desyContentEmpty)=\"setOpen(false)\" (desyContentNotEmpty)=\"setOpen(true)\">\r\n <button #desyContentEmptyIgnore (click)=\"onClick($event)\"\r\n ngxTippy [tippyProps]=\"tippyProperties\"\r\n [class]=\"['c-dropdown', classes] | makeHtmlList\"\r\n [attr.disabled]=\"isDisabled() ? 'disabled' : null\"\r\n aria-haspopup=\"true\"\r\n [attr.aria-disabled]=\"isDisabled() ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n [attr.aria-expanded]=\"isOpen\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.tabIndex]=\"isDisabled() ? '-1' : tabindex\">\r\n <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n <ng-container *desyCustomInnerContent=\"{ html: html, text: text }\"></ng-container>\r\n <ng-content></ng-content>\r\n </span>\r\n <svg class=\"inline-block -mr-2 align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n </button>\r\n <span *ngIf=\"hiddenText\" #desyContentEmptyIgnore class=\"sr-only\">{{ hiddenText }}</span>\r\n <div #dropdownContent style=\"display: none;\"\r\n [class]=\"['-ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n <ng-container *ngTemplateOutlet=\"caller\"></ng-container>\r\n </div>\r\n</div>\r\n"
|
|
794
793
|
},] }
|
|
795
794
|
];
|
|
796
795
|
DropdownComponent.propDecorators = {
|
|
797
|
-
dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { read: i0.ElementRef },] }],
|
|
796
|
+
dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { read: i0.ElementRef, static: true },] }],
|
|
798
797
|
id: [{ type: i0.Input }],
|
|
799
798
|
disabled: [{ type: i0.Input }],
|
|
800
799
|
hiddenText: [{ type: i0.Input }],
|
|
@@ -802,8 +801,7 @@
|
|
|
802
801
|
classesTooltip: [{ type: i0.Input }],
|
|
803
802
|
classes: [{ type: i0.Input }],
|
|
804
803
|
caller: [{ type: i0.Input }],
|
|
805
|
-
clickEvent: [{ type: i0.Output }]
|
|
806
|
-
onKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
|
|
804
|
+
clickEvent: [{ type: i0.Output }]
|
|
807
805
|
};
|
|
808
806
|
|
|
809
807
|
/**
|
|
@@ -827,28 +825,21 @@
|
|
|
827
825
|
return StringUtils;
|
|
828
826
|
}());
|
|
829
827
|
|
|
830
|
-
var ListboxLabelComponent = /** @class */ (function () {
|
|
828
|
+
var ListboxLabelComponent = /** @class */ (function (_super) {
|
|
829
|
+
__extends(ListboxLabelComponent, _super);
|
|
831
830
|
function ListboxLabelComponent() {
|
|
832
|
-
this
|
|
831
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
833
832
|
}
|
|
834
|
-
ListboxLabelComponent.prototype.ngOnInit = function () {
|
|
835
|
-
var _this = this;
|
|
836
|
-
setTimeout(function () { return _this.isInit = !!_this.content; });
|
|
837
|
-
};
|
|
838
|
-
ListboxLabelComponent.prototype.getContent = function () {
|
|
839
|
-
return this.isInit ? this.content : null;
|
|
840
|
-
};
|
|
841
833
|
return ListboxLabelComponent;
|
|
842
|
-
}());
|
|
834
|
+
}(ContentBaseComponent));
|
|
843
835
|
ListboxLabelComponent.decorators = [
|
|
844
836
|
{ type: i0.Component, args: [{
|
|
845
837
|
selector: 'desy-listbox-label',
|
|
846
|
-
template: "<ng-template #
|
|
838
|
+
template: "<ng-template #contentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n"
|
|
847
839
|
},] }
|
|
848
840
|
];
|
|
849
841
|
ListboxLabelComponent.propDecorators = {
|
|
850
|
-
classes: [{ type: i0.Input }]
|
|
851
|
-
content: [{ type: i0.ViewChild, args: ['childComponentTemplate',] }]
|
|
842
|
+
classes: [{ type: i0.Input }]
|
|
852
843
|
};
|
|
853
844
|
|
|
854
845
|
var ListboxItemComponent = /** @class */ (function (_super) {
|
|
@@ -925,54 +916,72 @@
|
|
|
925
916
|
var _this = _super.apply(this, __spread(arguments)) || this;
|
|
926
917
|
_this.itemsChange = new i0.EventEmitter();
|
|
927
918
|
_this.activeItemChange = new i0.EventEmitter();
|
|
928
|
-
_this.isListVisible = false;
|
|
919
|
+
_this.isListVisible = false; // Indica si la lista se está mostrando
|
|
929
920
|
return _this;
|
|
930
921
|
}
|
|
931
922
|
ListboxComponent.prototype.ngOnInit = function () {
|
|
932
|
-
var
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
function
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
},
|
|
964
|
-
};
|
|
965
|
-
},
|
|
966
|
-
}],
|
|
967
|
-
role: false,
|
|
968
|
-
aria: {
|
|
969
|
-
content: 'auto',
|
|
923
|
+
var listboxButtonElement = this.listboxButton.nativeElement;
|
|
924
|
+
if (this.listboxContent && this.listboxContent.nativeElement) {
|
|
925
|
+
var contentTooltip = this.listboxContent.nativeElement;
|
|
926
|
+
this.tippyProperties = {
|
|
927
|
+
placement: 'bottom-start',
|
|
928
|
+
inlinePositioning: true,
|
|
929
|
+
content: contentTooltip,
|
|
930
|
+
allowHTML: true,
|
|
931
|
+
trigger: 'click',
|
|
932
|
+
hideOnClick: true,
|
|
933
|
+
interactive: true,
|
|
934
|
+
arrow: false,
|
|
935
|
+
offset: [0, -10],
|
|
936
|
+
theme: '',
|
|
937
|
+
plugins: [
|
|
938
|
+
{
|
|
939
|
+
name: 'hideOnPopperBlur',
|
|
940
|
+
defaultValue: true,
|
|
941
|
+
fn: function (instance) {
|
|
942
|
+
return {
|
|
943
|
+
onCreate: function () {
|
|
944
|
+
instance.popper.addEventListener('focusout', function (event) {
|
|
945
|
+
if (instance.props.hideOnPopperBlur &&
|
|
946
|
+
event.relatedTarget &&
|
|
947
|
+
!instance.popper.contains(event.relatedTarget)) {
|
|
948
|
+
instance.hide();
|
|
949
|
+
}
|
|
950
|
+
});
|
|
951
|
+
},
|
|
952
|
+
};
|
|
953
|
+
}
|
|
970
954
|
},
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
955
|
+
{
|
|
956
|
+
name: 'hideOnEsc',
|
|
957
|
+
defaultValue: true,
|
|
958
|
+
fn: function (_a) {
|
|
959
|
+
var hide = _a.hide;
|
|
960
|
+
function onKeyDown(event) {
|
|
961
|
+
if (event.key === ListboxComponent.KEY_CODE_ESC) {
|
|
962
|
+
hide();
|
|
963
|
+
listboxButtonElement.focus();
|
|
964
|
+
}
|
|
965
|
+
}
|
|
966
|
+
return {
|
|
967
|
+
onShow: function () {
|
|
968
|
+
document.addEventListener('keydown', onKeyDown);
|
|
969
|
+
},
|
|
970
|
+
onHide: function () {
|
|
971
|
+
document.removeEventListener('keydown', onKeyDown);
|
|
972
|
+
},
|
|
973
|
+
};
|
|
974
|
+
},
|
|
975
|
+
}
|
|
976
|
+
],
|
|
977
|
+
role: false,
|
|
978
|
+
aria: {
|
|
979
|
+
content: 'auto',
|
|
980
|
+
},
|
|
981
|
+
onShow: this.onListShow.bind(this),
|
|
982
|
+
onHidden: this.onListClose.bind(this)
|
|
983
|
+
};
|
|
984
|
+
}
|
|
976
985
|
};
|
|
977
986
|
ListboxComponent.prototype.ngOnChanges = function () {
|
|
978
987
|
var _this = this;
|
|
@@ -1086,11 +1095,11 @@
|
|
|
1086
1095
|
if (this.doesChangeButtonText && !this.isMultiselectable && activeItems.length > 0) {
|
|
1087
1096
|
var activeItemOption = this.listboxOptions.find(function (item, index) { return index === activeItems[0].index; });
|
|
1088
1097
|
if (activeItemOption) {
|
|
1089
|
-
this.
|
|
1098
|
+
this.buttonContentHtml = activeItemOption.nativeElement.innerHTML;
|
|
1090
1099
|
}
|
|
1091
1100
|
}
|
|
1092
1101
|
else {
|
|
1093
|
-
this.
|
|
1102
|
+
this.buttonContentHtml = this.html ? this.html : null;
|
|
1094
1103
|
}
|
|
1095
1104
|
// Si hay cambios, se emiten
|
|
1096
1105
|
if (hasActiveItemChange) {
|
|
@@ -1107,9 +1116,6 @@
|
|
|
1107
1116
|
};
|
|
1108
1117
|
ListboxComponent.prototype.onListClose = function () {
|
|
1109
1118
|
this.isListVisible = false;
|
|
1110
|
-
if (this.listboxButton) {
|
|
1111
|
-
this.listboxButton.nativeElement.focus();
|
|
1112
|
-
}
|
|
1113
1119
|
};
|
|
1114
1120
|
ListboxComponent.prototype.onListFocus = function () {
|
|
1115
1121
|
var activeItemsData = this.getActiveItemsData();
|
|
@@ -1183,23 +1189,19 @@
|
|
|
1183
1189
|
ListboxComponent.prototype.getLabelContent = function (label) {
|
|
1184
1190
|
return label.html ? label.html : "<p>" + StringUtils.escapeHtml(label.text) + "</p>";
|
|
1185
1191
|
};
|
|
1186
|
-
ListboxComponent.prototype.isButtonContentHtml = function () {
|
|
1187
|
-
var activeItemsData = this.getActiveItemsData();
|
|
1188
|
-
return !!(this.doesChangeButtonText && !this.isMultiselectable && activeItemsData.length > 0 ? true : this.html);
|
|
1189
|
-
};
|
|
1190
1192
|
return ListboxComponent;
|
|
1191
1193
|
}(AccessibilityAndTextOrHtmlRequiredComponent));
|
|
1192
1194
|
ListboxComponent.KEY_CODE_ESC = 'Escape';
|
|
1193
1195
|
ListboxComponent.decorators = [
|
|
1194
1196
|
{ type: i0.Component, args: [{
|
|
1195
1197
|
selector: 'desy-listbox',
|
|
1196
|
-
template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n <div
|
|
1198
|
+
template: "<div [ngClass]=\"classesContainer ? classesContainer : 'relative'\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent?.classes, label?.classes] | makeHtmlList\">\r\n <ng-container *desyCustomInnerContent=\"{ component: labelComponent, html: label ? getLabelContent(label) : null }\"></ng-container>\r\n </div>\r\n <button #button [id]=\"id + '-button'\"\r\n [class]=\"['c-listbox', classes] | makeHtmlList\"\r\n ngxTippy [tippyProps]=\"tippyProperties\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-labelledby]=\"[hasLabel() ? id + '-label' : null, id + '-button'] | makeHtmlList\"\r\n [attr.disabled]=\"disabled ? 'disabled' : null\"\r\n [attr.aria-disabled]=\"disabled ? 'true' : (ariaDisabled ? ariaDisabled : null)\"\r\n [attr.aria-role] = \"role ? role : null\"\r\n [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errorMessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-hasppup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-tabindex] = \"tabindex ? tabindex : null\">\r\n <span class=\"inline-flex self-center max-w-xs align-middle truncate\">\r\n <ng-container *desyCustomInnerContent=\"{ html: buttonContentHtml, text: text }\"></ng-container>\r\n </span>\r\n <svg class=\"inline-block -mr-2 align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n </button>\r\n <div #tooltip [class]=\"['c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white', classesTooltip] | makeHtmlList\">\r\n <ul *ngIf=\"itemList\"\r\n #list [id]=\"id\"\r\n (focus)=\"onListFocus()\"\r\n (keydown.arrowUp)=\"moveFocus(currentFocusIndex - 1, $event)\"\r\n (keydown.arrowDown)=\"moveFocus(currentFocusIndex + 1, $event)\"\r\n (keydown.home)=\"moveFocus(0, $event)\"\r\n (keydown.end)=\"moveFocus(items.length - 1, $event)\"\r\n (keydown.space)=\"onSpace($event)\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n class=\"text-sm outline-none\"\r\n [attr.aria-labelledby]=\"hasLabel() ? id : (ariaLabelledBy ? ariaLabelledBy : null)\"\r\n [attr.aria-multiselectable]=\"isMultiselectable ? 'true' : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-label] = \"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby] = \"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-hidden] = \"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-controls] = \"ariaControls ? ariaControls : null\"\r\n [attr.aria-current] = \"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live] = \"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded] = \"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage] = \"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup] = \"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-activedescendant] = \"lastActiveItems.length > 0 ? getItemId(lastActiveItems[0].item, lastActiveItems[0].index) : null\">\r\n <ng-container *ngFor=\"let item of itemList; index as index\">\r\n <li #option *ngIf=\"item\" role=\"option\" (click)=\"selectItem(index)\"\r\n [class]=\"['flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'focused': index === currentFocusIndex}\"\r\n [attr.aria-label]=\"item.active ? 'true' : (item.ariaLabel ? item.ariaLabel : null)\"\r\n [id]=\"getItemId(item, index)\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-hidden] = \"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current] = \"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live] = \"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup] = \"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-tabindex] = \"item.tabindex ? item.tabindex : null\"\r\n\r\n [attr.aria-checked]=\"item.active\"\r\n [attr.aria-selected]=\"item.active\">\r\n <ng-container *desyCustomInnerContent=\"{ template: item['content'], html: item.html, text: item.text }\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n</div>\r\n"
|
|
1197
1199
|
},] }
|
|
1198
1200
|
];
|
|
1199
1201
|
ListboxComponent.propDecorators = {
|
|
1200
|
-
listboxButton: [{ type: i0.ViewChild, args: ['button', { read: i0.ElementRef },] }],
|
|
1202
|
+
listboxButton: [{ type: i0.ViewChild, args: ['button', { read: i0.ElementRef, static: true },] }],
|
|
1201
1203
|
listboxList: [{ type: i0.ViewChild, args: ['list', { read: i0.ElementRef },] }],
|
|
1202
|
-
listboxContent: [{ type: i0.ViewChild, args: ['tooltip', { read: i0.ElementRef },] }],
|
|
1204
|
+
listboxContent: [{ type: i0.ViewChild, args: ['tooltip', { read: i0.ElementRef, static: true },] }],
|
|
1203
1205
|
listboxOptions: [{ type: i0.ViewChildren, args: ['option', { read: i0.ElementRef },] }],
|
|
1204
1206
|
labelComponent: [{ type: i0.ContentChildren, args: [ListboxLabelComponent,] }],
|
|
1205
1207
|
itemComponentList: [{ type: i0.ContentChildren, args: [ListboxItemComponent,] }],
|
|
@@ -5091,7 +5093,7 @@
|
|
|
5091
5093
|
MenuVerticalComponent.decorators = [
|
|
5092
5094
|
{ type: i0.Component, args: [{
|
|
5093
5095
|
selector: 'desy-menu-vertical',
|
|
5094
|
-
template: "<!--\r\n Template para ser utilizado tanto por los items como por los subitems:\r\n - item: Item que representa\r\n - index: indice del item en la lista\r\n - id: identificador del item\r\n - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n <ng-container *ngIf=\"item\">\r\n <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n <ng-template #hasRouterLink>\r\n <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n <a [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"
|
|
5096
|
+
template: "<!--\r\n Template para ser utilizado tanto por los items como por los subitems:\r\n - item: Item que representa\r\n - index: indice del item en la lista\r\n - id: identificador del item\r\n - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n <ng-container *ngIf=\"item\">\r\n <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n <ng-template #hasRouterLink>\r\n <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n <a [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #notHref>\r\n <span [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </span>\r\n </ng-template>\r\n <ng-container *ngIf=\"isRoot && sub\">\r\n <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n [attr.aria-label]=\"sub.ariaLabel\"\r\n [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"sub.ariaHidden\"\r\n [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n [attr.aria-controls]=\"sub.ariaControls\"\r\n [attr.aria-current]=\"sub.ariaCurrent\"\r\n [attr.aria-live]=\"sub.ariaLive\"\r\n [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n [attr.tabindex]=\"sub.tabindex\">\r\n <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: subItem,\r\n id: getSubItemId(item, index, subIndex),\r\n index: subIndex,\r\n isRoot: false\r\n }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n <div *ngIf=\"!getSubItems(sub)\"\r\n [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n [id]=\"'sub-' + id\">\r\n <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </li>\r\n <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n <div class=\"sr-only\">Separador</div>\r\n </li>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n [attr.role]=\"(role ? role : null)\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.aria-hidden]=\"ariaHidden\"\r\n [attr.aria-disabled]=\"ariaDisabled\"\r\n [attr.aria-controls]=\"ariaControls\"\r\n [attr.aria-current]=\"ariaCurrent\"\r\n [attr.aria-live]=\"ariaLive\"\r\n [attr.aria-expanded]=\"ariaExpanded\"\r\n [attr.aria-haspopup]=\"ariaHasPopup\"\r\n [attr.tabindex]=\"tabindex\">\r\n <ul class=\"text-base\">\r\n <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n</nav>\r\n",
|
|
5095
5097
|
animations: [
|
|
5096
5098
|
animations.trigger('displayMenuVertical', [
|
|
5097
5099
|
animations.state('void', animations.style({
|
|
@@ -5887,7 +5889,7 @@
|
|
|
5887
5889
|
MenubarComponent.decorators = [
|
|
5888
5890
|
{ type: i0.Component, args: [{
|
|
5889
5891
|
selector: 'desy-menubar',
|
|
5890
|
-
template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <ng-container *ngIf=\"getLabelRef()\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n (focusin)=\"handleMenuFocusIn()\"\r\n (focusout)=\"handleMenuFocusOut($event)\"\r\n [ngClass]=\"{ 'focus': isFocused }\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n <a *ngIf=\"item.sub\" #link\r\n role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </span>\r\n <svg class=\"inline-block -mr-2 align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n </a>\r\n <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : ''\"\r\n [fragment]=\"item.fragment\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n\r\n <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n <ng-container [ngSwitch]=\"subItem.role\">\r\n <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n <ng-container *ngIf=\"subsubitem\">\r\n <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-checked]=\"!!subItem.checked\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"my-sm border-b border-neutral-base\">\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n</div>\r\n"
|
|
5892
|
+
template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <ng-container *ngIf=\"getLabelRef()\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n (focusin)=\"handleMenuFocusIn()\"\r\n (focusout)=\"handleMenuFocusOut($event)\"\r\n [ngClass]=\"{ 'focus': isFocused }\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n <a *ngIf=\"item.sub\" #link\r\n role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </span>\r\n <svg class=\"inline-block -mr-2 align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n </a>\r\n <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n [fragment]=\"item.fragment\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n\r\n <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n <ng-container [ngSwitch]=\"subItem.role\">\r\n <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n <ng-container *ngIf=\"subsubitem\">\r\n <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-checked]=\"!!subItem.checked\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"my-sm border-b border-neutral-base\">\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n</div>\r\n"
|
|
5891
5893
|
},] }
|
|
5892
5894
|
];
|
|
5893
5895
|
MenubarComponent.ctorParameters = function () { return [
|