@indice/ng-components 0.2.80 → 0.2.84
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/_styles.css +4 -4
- package/bundles/indice-ng-components.umd.js +2 -2
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/pager/pager.component.js +2 -2
- package/esm2015/lib/layouts/shell/shell-header/shell-header.component.js +2 -2
- package/fesm2015/indice-ng-components.js +2 -2
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/indice-ng-components.metadata.json +1 -1
- package/package.json +1 -1
package/_styles.css
CHANGED
|
@@ -715,7 +715,7 @@
|
|
|
715
715
|
|
|
716
716
|
@layer components {
|
|
717
717
|
.pager-container {
|
|
718
|
-
@apply flex items-center justify-between mb-2
|
|
718
|
+
@apply flex items-center justify-between mb-2;
|
|
719
719
|
}
|
|
720
720
|
|
|
721
721
|
.pager-container-inner {
|
|
@@ -727,7 +727,7 @@
|
|
|
727
727
|
}
|
|
728
728
|
|
|
729
729
|
.pager-pages-container {
|
|
730
|
-
@apply relative z-
|
|
730
|
+
@apply relative z-30 inline-flex rounded-sm;
|
|
731
731
|
}
|
|
732
732
|
|
|
733
733
|
.pager-button {
|
|
@@ -735,11 +735,11 @@
|
|
|
735
735
|
}
|
|
736
736
|
|
|
737
737
|
.pager-arrow-button-left {
|
|
738
|
-
@apply inline-flex relative ml-2
|
|
738
|
+
@apply hidden sm:inline-flex relative ml-2 items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
|
|
739
739
|
}
|
|
740
740
|
|
|
741
741
|
.pager-arrow-button-right {
|
|
742
|
-
@apply inline-flex relative mr-2
|
|
742
|
+
@apply hidden sm:inline-flex relative mr-2 items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
|
|
743
743
|
}
|
|
744
744
|
}
|
|
745
745
|
|
|
@@ -853,7 +853,7 @@
|
|
|
853
853
|
PagerComponent.decorators = [
|
|
854
854
|
{ type: i0.Component, args: [{
|
|
855
855
|
selector: 'lib-pager',
|
|
856
|
-
template: "<div class=\"pager-container\">\r\n <div class=\"pager-container-inner\">\r\n <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n <button (click)=\"toggleSortdir()\" class=\"pager-icon-button\">\r\n <span class=\"sr-only\">sort direction</span>\r\n <span class=\"inline-block relative\">\r\n <i [class]=\"sortdirIcon\"></i>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"pager-pages-container\">\r\n <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n <div class=\"mx-2\" *ngIf=\"count !== null && count > pageSize\">\r\n <button [disabled]=\"!canPreviousPage\" (click)=\"previousPage()\"\r\n class=\"pager-arrow-button-left\">\r\n <span class=\"sr-only\">Previous</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n <button [disabled]=\"!canNextPage\" (click)=\"nextPage()\"\r\n class=\"pager-arrow-button-right\">\r\n <span class=\"sr-only\">Next</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n</div>\r\n"
|
|
856
|
+
template: "<div class=\"pager-container\">\r\n <div class=\"pager-container-inner\">\r\n <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n <button (click)=\"toggleSortdir()\" [disabled]=\"!sort\" class=\"pager-icon-button\">\r\n <span class=\"sr-only\">sort direction</span>\r\n <span class=\"inline-block relative\">\r\n <i [class]=\"sortdirIcon\"></i>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"pager-pages-container\">\r\n <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n <div class=\"mx-2\" *ngIf=\"count !== null && count > pageSize\">\r\n <button [disabled]=\"!canPreviousPage\" (click)=\"previousPage()\"\r\n class=\"pager-arrow-button-left\">\r\n <span class=\"sr-only\">Previous</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n <button [disabled]=\"!canNextPage\" (click)=\"nextPage()\"\r\n class=\"pager-arrow-button-right\">\r\n <span class=\"sr-only\">Next</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n</div>\r\n"
|
|
857
857
|
},] }
|
|
858
858
|
];
|
|
859
859
|
PagerComponent.ctorParameters = function () { return [
|
|
@@ -1997,7 +1997,7 @@
|
|
|
1997
1997
|
{ type: i0.Component, args: [{
|
|
1998
1998
|
// tslint:disable-next-line:component-selector
|
|
1999
1999
|
selector: 'lib-shell-header',
|
|
2000
|
-
template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div [class]=\"border ? 'shell-header-border' : ''\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n <div>\r\n <a href=\"#\"\r\n [routerLink]=\"['/']\"><img class=\"h-8 w-8\" style=\"width:2rem; height: 2rem;\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n <a href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [routerLinkActive]=\"['nav-link-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n\r\n <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n <a class=\"shell-header-menu-rounded-button\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n [attr.href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n <span class=\"sr-only\">{{ link.text }}</span>\r\n <i *ngIf=\"link.icon\"\r\n [class]=\"link.icon\"></i>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Profile dropdown -->\r\n <div class=\"ml-2 relative\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n *ngIf=\"profileMenuVisible\">\r\n <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n <div *ngIf=\"user && showUserNameOnHeader\"\r\n class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n <button type=\"button\"\r\n *ngIf=\"user\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin(null)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n\r\n <div *ngIf=\"userMenuExpanded\"\r\n [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n role=\"menu\"\r\n aria-orientation=\"vertical\"\r\n aria-labelledby=\"user-menu\">\r\n <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n <ng-container *ngFor=\"let link of links.profile | async\">\r\n <a [attr.href]=\"link.path\"
|
|
2000
|
+
template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div [class]=\"border ? 'shell-header-border' : ''\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n <div>\r\n <a href=\"#\"\r\n [routerLink]=\"['/']\"><img class=\"h-8 w-8\" style=\"width:2rem; height: 2rem;\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n <a href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [routerLinkActive]=\"['nav-link-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n\r\n <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n <a class=\"shell-header-menu-rounded-button\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n [attr.href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n <span class=\"sr-only\">{{ link.text }}</span>\r\n <i *ngIf=\"link.icon\"\r\n [class]=\"link.icon\"></i>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Profile dropdown -->\r\n <div class=\"ml-2 relative\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n *ngIf=\"profileMenuVisible\">\r\n <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n <div *ngIf=\"user && showUserNameOnHeader\"\r\n class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n <button type=\"button\"\r\n *ngIf=\"user\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin(null)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n\r\n <div *ngIf=\"userMenuExpanded\"\r\n [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n role=\"menu\"\r\n aria-orientation=\"vertical\"\r\n aria-labelledby=\"user-menu\">\r\n <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n <ng-container *ngFor=\"let link of links.profile | async\">\r\n <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n {{ link.text }}\r\n </a>\r\n <a *ngIf=\"!link.external\" [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-profile-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\" class=\"nav-link-profile\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-button-container\">\r\n <!-- Mobile menu button -->\r\n <button type=\"button\"\r\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n class=\"mobile-menu-button\"\r\n aria-controls=\"mobile-menu\"\r\n [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n <span class=\"sr-only\">Open main menu</span>\r\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\r\n <svg class=\"block h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n <svg class=\"hidden h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Mobile menu, show/hide based on menu state. -->\r\n <div class=\"mobile-menu-container\"\r\n *ngIf=\"mobileMenuExpanded\"\r\n id=\"mobile-menu\">\r\n <div class=\"mobile-menu-link-container\">\r\n <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n <a *ngIf=\"!link.external\" [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-mobile-active']\" [routerLinkActiveOptions]=\"{ exact: link.exact }\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user\">\r\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n </a>\r\n </ng-container>\r\n </div>\r\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n <div class=\"mobile-menu-user-info-container-inner\">\r\n <div class=\"flex-shrink-0\">\r\n <span class=\"mobile-menu-avatar-container\">\r\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n </span>\r\n </div>\r\n <div class=\"ml-3\">\r\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n </div>\r\n <button class=\"mobile-menu-rounded-button\">\r\n <span class=\"sr-only\">View notifications</span>\r\n <!-- Heroicon name: outline/bell -->\r\n <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"mobile-menu-link-container\">\r\n <ng-container *ngFor=\"let link of links.profile | async\">\r\n <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n <a [routerLink]=\"link.path\"\r\n [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n <!-- <a href=\"#\" class=\"block px-3 py-2 rounded-sm text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n </div>\r\n </div>\r\n </div>\r\n</nav>\r\n"
|
|
2001
2001
|
},] }
|
|
2002
2002
|
];
|
|
2003
2003
|
ShellHeaderComponent.ctorParameters = function () { return [
|