@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
1,571 lines (1,381 loc) • 245 kB
JavaScript
var LeagueTeams = (function () {
'use strict';
const buttonStyles = `
.button-shared {
padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */
border: 1px solid var(--le-border-color-medium, #ccc);
background-color: var(--le-background-color-button, #f0f0f0);
color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */
cursor: pointer;
border-radius: var(--le-border-radius-standard, 4px);
font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */
text-decoration: none;
display: inline-block;
text-align: center;
line-height: normal; /* Ensure consistent line height */
white-space: nowrap; /* Prevent text wrapping */
vertical-align: middle; /* Align nicely if next to text/icons */
user-select: none; /* Prevent text selection on click */
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */
}
.button-shared:hover:not(:disabled) {
background-color: var(--le-background-color-button-hover, #e0e0e0);
border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */
/* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */
}
.button-shared:active:not(:disabled) {
/* Optional: style for active (pressed) state */
/* background-color: var(--le-background-color-button-active, #d0d0d0); */
}
.button-shared:disabled,
.button-shared.disabled { /* Allow class-based disabling too */
background-color: var(--le-background-color-button-disabled, #eee);
color: var(--le-text-color-secondary, #aaa);
border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */
cursor: not-allowed;
opacity: 0.7; /* Visually indicate disabled state */
}
/* Small button variant */
.button-shared.button-sm {
padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */
font-size: var(--le-font-size-small, 1em); /* Increased small font size */
/* line-height can be tighter if needed for small buttons */
/* line-height: 1.2; */
}
/* Variations */
.button-shared.button-primary {
background-color: var(--le-color-primary, #007bff);
color: var(--le-text-color-on-primary, #fff);
border-color: var(--le-color-primary, #007bff);
}
.button-shared.button-primary:hover:not(:disabled) {
background-color: var(--le-color-primary-hover, #0056b3);
border-color: var(--le-color-primary-hover, #0056b3);
}
.button-shared.button-secondary-light {
background-color: var(--le-background-color-button-secondary-light, #f8f9fa);
color: var(--le-text-color-secondary-light-text, #212529);
border-color: var(--le-border-color-secondary-light, #ced4da);
}
.button-shared.button-secondary-light:hover:not(:disabled) {
background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);
border-color: var(--le-border-color-secondary-light-hover, #dae0e5);
color: var(--le-text-color-secondary-light-text-hover, #212529);
}
/* Example for a darker secondary button if needed elsewhere
.button-shared.button-secondary {
background-color: var(--le-color-secondary, #6c757d);
color: var(--le-text-color-on-secondary, #fff);
border-color: var(--le-color-secondary, #6c757d);
}
.button-shared.button-secondary:hover:not(:disabled) {
background-color: var(--le-color-secondary-hover, #5a6268);
border-color: var(--le-color-secondary-hover, #5a6268);
}
*/
`;
const modalStyles = `
.modal-shared-overlay {
display: none; /* Hidden by default */
position: fixed;
z-index: var(--le-z-index-modal-overlay, 1000); /* Ensure it's on top */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));
}
.modal-shared-content {
background-color: var(--le-background-color-panel, #fff);
margin: var(--le-modal-margin-top, 10%) auto; /* Default to 10% from top, centered */
padding: 0; /* Remove padding, header/body/footer will handle it */
border: 1px solid var(--le-border-color-dark, #ccc);
width: var(--le-modal-width, 90%); /* Increased width for mobile */
max-width: var(--le-modal-max-width, 600px);
border-radius: var(--le-border-radius-large, 8px);
box-shadow: var(--le-shadow-modal, 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19));
display: flex;
flex-direction: column;
}
/* Specific styles for mobile-view class, used by leagueMatch.js */
.modal-shared-content.mobile-view {
margin: 5% auto; /* Less margin from top on mobile */
width: var(--le-modal-width-mobile, 95%); /* Even wider on mobile */
max-width: var(--le-modal-max-width-mobile, 650px); /* Increased max-width for mobile */
}
.modal-shared-header {
/* Utilizes .panel-header-shared for base styling if desired, or define fully here */
/* This example assumes it might be combined with .panel-header-shared or similar */
padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */
border-bottom: 1px solid var(--le-border-color-medium, #eee);
font-weight: bold;
color: var(--le-text-color-primary, #333);
background-color: var(--le-background-color-header, #f9f9f9); /* Modal header distinct background */
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--le-font-size-large, 1.4em); /* Increased large font size */
border-top-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */
border-top-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */
}
.modal-shared-header .close-button-shared { /* Specific styling for a close button if needed */
color: var(--le-text-color-secondary, #aaa);
font-size: 1.75em; /* Increased size */
font-weight: bold;
background: none;
border: none;
cursor: pointer;
}
.modal-shared-header .close-button-shared:hover,
.modal-shared-header .close-button-shared:focus {
color: var(--le-text-color-primary, #000);
text-decoration: none;
}
.modal-shared-body {
padding: var(--le-padding-m, 1.25em); /* Increased padding */
overflow-y: auto; /* Allow body to scroll if content is too long */
flex-grow: 1; /* Allows body to take up available space if modal has fixed height */
}
.modal-shared-footer {
padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */
text-align: right;
border-top: 1px solid var(--le-border-color-medium, #eee);
background-color: var(--le-background-color-header, #f9f9f9); /* Optional: footer background */
border-bottom-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */
border-bottom-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */
}
.modal-shared-footer .button-shared + .button-shared { /* Spacing between buttons in footer */
margin-left: var(--le-padding-s, 0.75em); /* Increased margin */
}
`;
const formStyles = `
.form-group-shared {
margin-bottom: var(--le-padding-m, 1.25em); /* Increased margin */
}
.form-label-shared {
display: block;
margin-bottom: var(--le-padding-xs, 0.4em); /* Increased margin */
font-weight: bold;
color: var(--le-text-color-primary, #333);
font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */
}
.form-input-shared,
.form-textarea-shared,
.form-select-shared {
width: 100%;
padding: var(--le-padding-s, 0.75em); /* Increased padding */
border: 1px solid var(--le-border-color-dark, #ccc);
border-radius: var(--le-border-radius-standard, 4px);
box-sizing: border-box;
font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */
color: var(--le-text-color-primary, #333);
background-color: var(--le-background-color-panel, #fff);
}
.form-input-shared:focus,
.form-textarea-shared:focus,
.form-select-shared:focus {
border-color: var(--le-border-color-accent, #2196f3);
outline: none; /* Or a custom focus ring */
box-shadow: 0 0 0 2px var(--le-focus-ring-color, rgba(33, 150, 243, 0.3));
}
/* Specific styling for checkbox groups if needed */
.form-checkbox-label-shared {
display: flex; /* Changed to flex for better alignment */
align-items: center;
font-weight: normal; /* Typically labels for checkboxes are not bold by default */
font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */
color: var(--le-text-color-primary, #333);
}
.form-checkbox-label-shared input[type="checkbox"] {
margin-right: var(--le-padding-s, 0.75em); /* Increased margin */
/* Consider custom styling for checkboxes if desired, or rely on browser defaults */
/* For consistent appearance across browsers, custom checkbox styling can be complex */
/* For now, using default with adjusted margin */
width: auto; /* Override width: 100% from .form-input-shared if a generic class was applied */
vertical-align: middle; /* Align checkbox with text */
}
/* Styling for a container of multiple checkboxes or radio buttons */
.form-options-group-shared {
/* Styles for a group of checkboxes/radios, e.g., display: flex; flex-direction: column; gap: ... */
}
/* Styling for individual option within a group */
.form-option-item-shared {
/* Styles for each checkbox/radio item within a group */
}
`;
const mobileStyles = `
/* Mobile-specific styling that can be added to host elements */
/* Increased font sizes for better readability on mobile */
--le-font-size-base: 1.4em;
--le-font-size-small: 1.2em;
--le-font-size-medium: 1.6em;
--le-font-size-large: 1.8em;
--le-font-size-xlarge: 2em;
/* Adjust padding for better touch targets */
--le-padding-s: 0.6rem;
--le-padding-m: 1rem;
/* Other mobile optimizations */
font-size: var(--le-font-size-base);
line-height: 1.4;
`;
// SweetAlert2 Mobile-Specific Style Overrides
// These styles are specifically designed to improve the appearance and usability
// of SweetAlert2 dialogs on smaller screens (mobile devices).
// They should be injected globally by elements that use SweetAlert2.
const sweetAlertMobileOverrides = `
/* Injected SweetAlert2 Mobile Styles - Production v1 */
.swal2-popup.lae-swal-popup-mobile {
width: 90vw !important;
max-width: 480px !important;
padding: 1rem !important; /* Increased padding for better touch spacing */
font-size: 1rem !important; /* Base font size for content */
}
.lae-swal-popup-mobile .swal2-title,
.lae-swal-title-mobile {
font-size: 1.4rem !important; /* Readable title size for mobile */
padding: 0.5rem 0.5rem 0.75rem !important; /* Adjusted padding */
margin-bottom: 0 !important; /* Remove default bottom margin if any, handled by container */
line-height: 1.3 !important;
}
.lae-swal-popup-mobile .swal2-html-container,
.lae-swal-html-container-mobile {
font-size: 0.95rem !important; /* Slightly smaller for body text */
margin: 0.75rem 0.5rem !important; /* Vertical and horizontal margin */
line-height: 1.5 !important;
text-align: center !important;
}
.lae-swal-popup-mobile .swal2-actions,
.lae-swal-actions-mobile {
width: 100% !important;
margin-top: 1rem !important;
gap: 0.65rem !important; /* Space between stacked buttons */
flex-direction: column-reverse !important; /* Stack buttons, confirm on top */
}
.lae-swal-popup-mobile .swal2-styled,
.lae-swal-styled-mobile {
width: 100% !important; /* Full width buttons */
padding: 0.85rem !important; /* Generous padding for touch targets */
font-size: 1rem !important;
margin: 0 !important; /* Remove individual margins, gap handles spacing */
border-radius: 0.3rem !important;
}
/* Optional: If you want to ensure default button colors are explicitly set or overridden for mobile */
/* .lae-swal-popup-mobile .swal2-confirm.lae-swal-styled-mobile {
background-color: #3085d6 !important; /* Example: Default confirm blue */
/* }
.lae-swal-popup-mobile .swal2-cancel.lae-swal-styled-mobile {
background-color: #d33 !important; /* Example: Default cancel red */
/* } */
`;
// SweetAlert2 Global Style Overrides
// These are general global styles for SweetAlert2 dialogs, ensuring a consistent
// base appearance. They should be injected globally by elements that use SweetAlert2.
const sweetAlertGlobalStyles = `
/* SweetAlert2 Global Styles */
.swal2-popup {
font-family: var(--le-font-family-base, sans-serif); /* Assuming you have a base font family variable */
background-color: var(--le-background-color-panel, #fff) !important;
border-radius: var(--le-border-radius-large, 8px) !important;
border: 1px solid var(--le-border-color-dark, #ccc) !important;
color: var(--le-text-color-primary, #333) !important;
}
.swal2-title {
color: var(--le-text-color-primary, #333) !important;
font-size: var(--le-font-size-large, 1.4em) !important; /* Match modal header */
font-weight: bold !important;
}
.swal2-html-container {
color: var(--le-text-color-primary, #333) !important;
font-size: var(--le-font-size-base, 1em) !important;
margin: var(--le-padding-m, 1.25em) !important; /* Add some margin */
}
.swal2-actions {
margin-top: var(--le-padding-m, 1.25em) !important;
}
.swal2-styled { /* Base for swal buttons */
padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em) !important;
border-radius: var(--le-border-radius-standard, 4px) !important;
font-size: var(--le-font-size-medium, 1.15em) !important;
text-decoration: none !important;
/* display: inline-block !important; */ /* Removed to allow SweetAlert2 to control visibility */
text-align: center !important;
line-height: normal !important;
white-space: nowrap !important;
vertical-align: middle !important;
user-select: none !important;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
border: 1px solid transparent !important; /* Start with transparent border, colors will override */
}
.swal2-styled:focus {
outline: none !important;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important; /* Example focus, adjust as needed */
}
.swal2-styled:hover:not(:disabled) {
/* General hover, specific button types might override */
filter: brightness(90%);
}
.swal2-confirm {
background-color: var(--le-color-confirm, #28a745) !important; /* Define --le-color-confirm or use existing */
color: var(--le-text-color-on-primary, #fff) !important;
border-color: var(--le-color-confirm, #28a745) !important;
}
.swal2-confirm:hover:not(:disabled) {
background-color: var(--le-color-confirm-hover, #218838) !important; /* Define --le-color-confirm-hover */
border-color: var(--le-color-confirm-hover, #218838) !important;
}
.swal2-cancel {
background-color: var(--le-color-cancel, #dc3545) !important; /* Define --le-color-cancel or use existing */
color: var(--le-text-color-on-primary, #fff) !important;
border-color: var(--le-color-cancel, #dc3545) !important;
}
.swal2-cancel:hover:not(:disabled) {
background-color: var(--le-color-cancel-hover, #c82333) !important; /* Define --le-color-cancel-hover */
border-color: var(--le-color-cancel-hover, #c82333) !important;
}
/* If you use a deny button */
.swal2-deny {
background-color: var(--le-color-deny, #6c757d) !important; /* Define --le-color-deny */
color: var(--le-text-color-on-primary, #fff) !important;
border-color: var(--le-color-deny, #6c757d) !important;
}
.swal2-deny:hover:not(:disabled) {
background-color: var(--le-color-deny-hover, #5a6268) !important; /* Define --le-color-deny-hover */
border-color: var(--le-color-deny-hover, #5a6268) !important;
}
/* Icon styling - optional, if you want to color default icons */
.swal2-icon.swal2-warning {
color: var(--le-text-color-warning, #ffc107) !important; /* Define --le-text-color-warning */
border-color: var(--le-text-color-warning, #ffc107) !important;
}
.swal2-icon.swal2-error {
color: var(--le-text-color-error, #dc3545) !important; /* Define --le-text-color-error */
border-color: var(--le-text-color-error, #dc3545) !important;
}
.swal2-icon.swal2-success {
color: var(--le-text-color-success, #28a745) !important; /* Define --le-text-color-success */
border-color: var(--le-text-color-success, #28a745) !important;
}
.swal2-icon.swal2-info {
color: var(--le-text-color-info, #17a2b8) !important; /* Define --le-text-color-info */
border-color: var(--le-text-color-info, #17a2b8) !important;
}
`;
const BASE_STYLES = `
${buttonStyles}
${modalStyles}
${formStyles}
:host {
display: none;
position: fixed;
z-index: var(--le-z-index-modal, 1001);
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));
align-items: center;
justify-content: center;
}
:host([open][is-mobile="true"]) {
display: flex;
${mobileStyles}
}
:host([open]) {
display: flex;
}
/* Teams Manager Layout */
.teams-manager-content {
background: var(--le-background-color-panel, #fff);
border-radius: var(--le-border-radius-large, 8px);
max-width: 900px;
width: 90%;
max-height: 80vh;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
overflow: hidden;
margin: auto; /* Center the modal */
}
.teams-manager-content.mobile-view {
width: 95%;
max-width: 95%;
max-height: 90vh;
}
.teams-manager-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--le-padding-l, 1.5rem);
border-bottom: 1px solid var(--le-border-color-light, #eee);
background: var(--le-background-color-header, #f8f9fa);
}
.teams-manager-header h3 {
margin: 0;
color: var(--le-text-color-primary, #333);
font-size: var(--le-font-size-large, 1.25rem);
}
.teams-manager-body {
padding: var(--le-padding-l, 1.5rem);
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
gap: var(--le-padding-l, 1.5rem);
}
.teams-manager-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--le-padding-m, 1rem);
padding: var(--le-padding-l, 1.5rem);
border-top: 1px solid var(--le-border-color-light, #eee);
background: var(--le-background-color-footer, #f8f9fa);
}
.footer-options {
display: flex;
align-items: center;
}
.footer-buttons {
display: flex;
gap: var(--le-padding-m, 1rem);
justify-content: flex-end;
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--le-padding-s, 0.5rem);
cursor: pointer;
color: var(--le-text-color-primary, #333);
font-size: var(--le-font-size-base, 1rem);
user-select: none;
}
.checkbox-label input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
/* Action Buttons */
.teams-action-buttons {
display: flex;
gap: var(--le-padding-m, 1rem);
flex-wrap: wrap;
}
.teams-action-buttons .button-shared {
min-width: 100px;
}
.teams-action-buttons.disabled {
pointer-events: none;
opacity: 0.5;
}
/* Teams List Panel */
.teams-list-panel {
border: 1px solid var(--le-border-color-medium, #ddd);
border-radius: var(--le-border-radius-standard, 4px);
background: var(--le-background-color-panel, #fff);
}
.teams-list-panel h4 {
margin: 0;
padding: var(--le-padding-m, 1rem);
background: var(--le-background-color-header, #f8f9fa);
border-bottom: 1px solid var(--le-border-color-light, #eee);
font-size: var(--le-font-size-base, 1rem);
color: var(--le-text-color-primary, #333);
}
.teams-list-panel.disabled {
pointer-events: none;
opacity: 0.6;
}
.teams-list-panel.disabled .team-list-item {
cursor: not-allowed;
}
.teams-list-container {
max-height: 200px;
overflow-y: auto;
}
.teams-list {
list-style: none;
margin: 0;
padding: 0;
}
.team-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--le-padding-m, 1rem);
border-bottom: 1px solid var(--le-border-color-light, #eee);
cursor: pointer;
transition: background-color 0.2s ease;
}
.team-list-item:hover {
background-color: var(--le-background-color-hover, #f5f5f5);
}
.team-list-item.selected {
background-color: var(--le-background-color-selected, #e3f2fd);
border-left: 3px solid var(--le-border-color-primary, #2196f3);
}
.team-list-item:last-child {
border-bottom: none;
}
.team-info {
display: flex;
align-items: center;
flex: 1;
}
.team-name {
font-weight: 500;
color: var(--le-text-color-primary, #333);
}
.team-source {
color: var(--le-text-color-secondary, #666);
font-style: italic;
margin-left: var(--le-padding-s, 0.5rem);
}
.team-actions {
display: flex;
gap: var(--le-padding-s, 0.5rem);
}
.team-actions .button-shared {
opacity: 0.8;
transition: opacity 0.2s ease;
}
.team-actions .button-shared:hover {
opacity: 1;
}
.no-teams-message {
padding: var(--le-padding-l, 1.5rem);
text-align: center;
color: var(--le-text-color-secondary, #666);
font-style: italic;
}
/* Team Editor Panel */
.team-editor-panel {
border: 1px solid var(--le-border-color-medium, #ddd);
border-radius: var(--le-border-radius-standard, 4px);
background: var(--le-background-color-panel, #fff);
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.team-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--le-padding-m, 1rem);
background: var(--le-background-color-header, #f8f9fa);
border-bottom: 1px solid var(--le-border-color-light, #eee);
}
.team-editor-header h4 {
margin: 0;
font-size: var(--le-font-size-base, 1rem);
color: var(--le-text-color-primary, #333);
}
.team-editor-body {
padding: var(--le-padding-l, 1.5rem);
}
.team-editor-footer {
display: flex;
justify-content: flex-end;
gap: var(--le-padding-m, 1rem);
padding: var(--le-padding-m, 1rem);
border-top: 1px solid var(--le-border-color-light, #eee);
background: var(--le-background-color-footer, #f8f9fa);
}
.modal-close-button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--le-text-color-secondary, #666);
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.modal-close-button:hover {
background-color: var(--le-background-color-button-hover, #e0e0e0);
color: var(--le-text-color-primary, #333);
}
/* Form styles */
.form-group-shared {
margin-bottom: var(--le-padding-m, 1rem);
}
.form-label-shared {
display: block;
margin-bottom: var(--le-padding-s, 0.5rem);
font-weight: bold;
color: var(--le-text-color-primary, #333);
}
.form-label-shared input[type="checkbox"] {
margin-right: var(--le-padding-xs, 0.25rem);
}
.form-input-shared {
width: 100%;
padding: var(--le-padding-s, 0.5rem);
border: 1px solid var(--le-border-color-medium, #ddd);
border-radius: var(--le-border-radius-standard, 4px);
font-size: var(--le-font-size-base, 1rem);
background-color: var(--le-background-color-panel, #fff);
color: var(--le-text-color-primary, #333);
box-sizing: border-box;
}
.form-input-shared:focus {
outline: none;
border-color: var(--le-border-color-focus, #007cba);
box-shadow: 0 0 0 2px var(--le-background-color-focus-ring, rgba(0, 124, 186, 0.2));
}
.form-input-shared:disabled {
background-color: var(--le-background-color-disabled, #f5f5f5);
color: var(--le-text-color-disabled, #999);
cursor: not-allowed;
}
.form-error-shared {
color: var(--le-text-color-error, #d32f2f);
background-color: var(--le-background-color-error, #ffeaa7);
padding: var(--le-padding-s, 0.5rem);
border: 1px solid var(--le-border-color-error, #e74c3c);
border-radius: var(--le-border-radius-standard, 4px);
margin-bottom: var(--le-padding-s, 0.5rem);
}
/* Update button styling */
.button-update {
background-color: var(--le-background-color-accent, #4caf50) !important;
color: white !important;
border-color: var(--le-border-color-accent, #45a049) !important;
}
.button-update:hover {
background-color: var(--le-background-color-accent-hover, #45a049) !important;
border-color: var(--le-border-color-accent-hover, #3d8b40) !important;
}
/* Mobile-specific adjustments */
@media (max-width: 480px) {
.teams-manager-content {
width: 95% !important;
max-width: 95% !important;
margin: 5% auto;
font-size: 16px !important;
max-height: 95vh;
}
.teams-manager-header {
padding: 15px;
}
.teams-manager-header h3 {
font-size: 18px !important;
}
.teams-manager-body {
padding: 15px;
gap: 15px;
}
.teams-manager-footer {
padding: 15px;
flex-direction: column;
gap: 15px;
}
.footer-options {
order: 1;
justify-content: center;
}
.footer-buttons {
order: 2;
flex-direction: column-reverse;
gap: 10px;
}
.footer-buttons .button-shared {
width: 100%;
margin: 0;
}
.teams-action-buttons {
flex-direction: column;
gap: 10px;
}
.teams-action-buttons .button-shared {
width: 100%;
min-width: auto;
}
.teams-list-container {
max-height: 150px;
}
.team-list-item {
padding: 15px 10px;
}
.team-list-item.selected {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.team-info {
order: 1;
}
.team-actions {
order: 2;
justify-content: flex-end;
}
.team-actions .button-shared {
width: auto;
min-width: 80px;
}
.team-editor-header {
padding: 15px 10px;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.team-editor-body {
padding: 15px 10px;
}
.team-editor-footer {
padding: 15px 10px;
flex-direction: column-reverse;
gap: 10px;
}
.team-editor-footer .button-shared {
width: 100%;
}
.form-label-shared {
font-size: 16px !important;
margin-bottom: 8px;
}
.form-input-shared {
font-size: 16px !important;
padding: 10px !important;
height: auto !important;
}
.button-shared {
font-size: 16px !important;
padding: 10px 15px !important;
min-height: 44px;
}
.button-sm {
font-size: 14px !important;
padding: 8px 12px !important;
min-height: 36px;
}
}
`;
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var sweetalert2_all$2 = {exports: {}};
/*!
* sweetalert2 v11.22.0
* Released under the MIT License.
*/
var sweetalert2_all$1 = sweetalert2_all$2.exports;
var hasRequiredSweetalert2_all;
function requireSweetalert2_all () {
if (hasRequiredSweetalert2_all) return sweetalert2_all$2.exports;
hasRequiredSweetalert2_all = 1;
(function (module, exports) {
(function (global, factory) {
module.exports = factory() ;
})(sweetalert2_all$1, (function () {
function _assertClassBrand(e, t, n) {
if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
throw new TypeError("Private element is not present on this object");
}
function _checkPrivateRedeclaration(e, t) {
if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
}
function _classPrivateFieldGet2(s, a) {
return s.get(_assertClassBrand(s, a));
}
function _classPrivateFieldInitSpec(e, t, a) {
_checkPrivateRedeclaration(e, t), t.set(e, a);
}
function _classPrivateFieldSet2(s, a, r) {
return s.set(_assertClassBrand(s, a), r), r;
}
const RESTORE_FOCUS_TIMEOUT = 100;
/** @type {GlobalState} */
const globalState = {};
const focusPreviousActiveElement = () => {
if (globalState.previousActiveElement instanceof HTMLElement) {
globalState.previousActiveElement.focus();
globalState.previousActiveElement = null;
} else if (document.body) {
document.body.focus();
}
};
/**
* Restore previous active (focused) element
*
* @param {boolean} returnFocus
* @returns {Promise<void>}
*/
const restoreActiveElement = returnFocus => {
return new Promise(resolve => {
if (!returnFocus) {
return resolve();
}
const x = window.scrollX;
const y = window.scrollY;
globalState.restoreFocusTimeout = setTimeout(() => {
focusPreviousActiveElement();
resolve();
}, RESTORE_FOCUS_TIMEOUT); // issues/900
window.scrollTo(x, y);
});
};
const swalPrefix = 'swal2-';
/**
* @typedef {Record<SwalClass, string>} SwalClasses
*/
/**
* @typedef {'success' | 'warning' | 'info' | 'question' | 'error'} SwalIcon
* @typedef {Record<SwalIcon, string>} SwalIcons
*/
/** @type {SwalClass[]} */
const classNames = ['container', 'shown', 'height-auto', 'iosfix', 'popup', 'modal', 'no-backdrop', 'no-transition', 'toast', 'toast-shown', 'show', 'hide', 'close', 'title', 'html-container', 'actions', 'confirm', 'deny', 'cancel', 'footer', 'icon', 'icon-content', 'image', 'input', 'file', 'range', 'select', 'radio', 'checkbox', 'label', 'textarea', 'inputerror', 'input-label', 'validation-message', 'progress-steps', 'active-progress-step', 'progress-step', 'progress-step-line', 'loader', 'loading', 'styled', 'top', 'top-start', 'top-end', 'top-left', 'top-right', 'center', 'center-start', 'center-end', 'center-left', 'center-right', 'bottom', 'bottom-start', 'bottom-end', 'bottom-left', 'bottom-right', 'grow-row', 'grow-column', 'grow-fullscreen', 'rtl', 'timer-progress-bar', 'timer-progress-bar-container', 'scrollbar-measure', 'icon-success', 'icon-warning', 'icon-info', 'icon-question', 'icon-error', 'draggable', 'dragging'];
const swalClasses = classNames.reduce((acc, className) => {
acc[className] = swalPrefix + className;
return acc;
}, /** @type {SwalClasses} */{});
/** @type {SwalIcon[]} */
const icons = ['success', 'warning', 'info', 'question', 'error'];
const iconTypes = icons.reduce((acc, icon) => {
acc[icon] = swalPrefix + icon;
return acc;
}, /** @type {SwalIcons} */{});
const consolePrefix = 'SweetAlert2:';
/**
* Capitalize the first letter of a string
*
* @param {string} str
* @returns {string}
*/
const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
/**
* Standardize console warnings
*
* @param {string | string[]} message
*/
const warn = message => {
console.warn(`${consolePrefix} ${typeof message === 'object' ? message.join(' ') : message}`);
};
/**
* Standardize console errors
*
* @param {string} message
*/
const error = message => {
console.error(`${consolePrefix} ${message}`);
};
/**
* Private global state for `warnOnce`
*
* @type {string[]}
* @private
*/
const previousWarnOnceMessages = [];
/**
* Show a console warning, but only if it hasn't already been shown
*
* @param {string} message
*/
const warnOnce = message => {
if (!previousWarnOnceMessages.includes(message)) {
previousWarnOnceMessages.push(message);
warn(message);
}
};
/**
* Show a one-time console warning about deprecated params/methods
*
* @param {string} deprecatedParam
* @param {string?} useInstead
*/
const warnAboutDeprecation = (deprecatedParam, useInstead = null) => {
warnOnce(`"${deprecatedParam}" is deprecated and will be removed in the next major release.${useInstead ? ` Use "${useInstead}" instead.` : ''}`);
};
/**
* If `arg` is a function, call it (with no arguments or context) and return the result.
* Otherwise, just pass the value through
*
* @param {Function | any} arg
* @returns {any}
*/
const callIfFunction = arg => typeof arg === 'function' ? arg() : arg;
/**
* @param {any} arg
* @returns {boolean}
*/
const hasToPromiseFn = arg => arg && typeof arg.toPromise === 'function';
/**
* @param {any} arg
* @returns {Promise<any>}
*/
const asPromise = arg => hasToPromiseFn(arg) ? arg.toPromise() : Promise.resolve(arg);
/**
* @param {any} arg
* @returns {boolean}
*/
const isPromise = arg => arg && Promise.resolve(arg) === arg;
/**
* Gets the popup container which contains the backdrop and the popup itself.
*
* @returns {HTMLElement | null}
*/
const getContainer = () => document.body.querySelector(`.${swalClasses.container}`);
/**
* @param {string} selectorString
* @returns {HTMLElement | null}
*/
const elementBySelector = selectorString => {
const container = getContainer();
return container ? container.querySelector(selectorString) : null;
};
/**
* @param {string} className
* @returns {HTMLElement | null}
*/
const elementByClass = className => {
return elementBySelector(`.${className}`);
};
/**
* @returns {HTMLElement | null}
*/
const getPopup = () => elementByClass(swalClasses.popup);
/**
* @returns {HTMLElement | null}
*/
const getIcon = () => elementByClass(swalClasses.icon);
/**
* @returns {HTMLElement | null}
*/
const getIconContent = () => elementByClass(swalClasses['icon-content']);
/**
* @returns {HTMLElement | null}
*/
const getTitle = () => elementByClass(swalClasses.title);
/**
* @returns {HTMLElement | null}
*/
const getHtmlContainer = () => elementByClass(swalClasses['html-container']);
/**
* @returns {HTMLElement | null}
*/
const getImage = () => elementByClass(swalClasses.image);
/**
* @returns {HTMLElement | null}
*/
const getProgressSteps = () => elementByClass(swalClasses['progress-steps']);
/**
* @returns {HTMLElement | null}
*/
const getValidationMessage = () => elementByClass(swalClasses['validation-message']);
/**
* @returns {HTMLButtonElement | null}
*/
const getConfirmButton = () => (/** @type {HTMLButtonElement} */elementBySelector(`.${swalClasses.actions} .${swalClasses.confirm}`));
/**
* @returns {HTMLButtonElement | null}
*/
const getCancelButton = () => (/** @type {HTMLButtonElement} */elementBySelector(`.${swalClasses.actions} .${swalClasses.cancel}`));
/**
* @returns {HTMLButtonElement | null}
*/
const getDenyButton = () => (/** @type {HTMLButtonElement} */elementBySelector(`.${swalClasses.actions} .${swalClasses.deny}`));
/**
* @returns {HTMLElement | null}
*/
const getInputLabel = () => elementByClass(swalClasses['input-label']);
/**
* @returns {HTMLElement | null}
*/
const getLoader = () => elementBySelector(`.${swalClasses.loader}`);
/**
* @returns {HTMLElement | null}
*/
const getActions = () => elementByClass(swalClasses.actions);
/**
* @returns {HTMLElement | null}
*/
const getFooter = () => elementByClass(swalClasses.footer);
/**
* @returns {HTMLElement | null}
*/
const getTimerProgressBar = () => elementByClass(swalClasses['timer-progress-bar']);
/**
* @returns {HTMLElement | null}
*/
const getCloseButton = () => elementByClass(swalClasses.close);
// https://github.com/jkup/focusable/blob/master/index.js
const focusable = `
a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
object,
embed,
[tabindex="0"],
[contenteditable],
audio[controls],
video[controls],
summary
`;
/**
* @returns {HTMLElement[]}
*/
const getFocusableElements = () => {
const popup = getPopup();
if (!popup) {
return [];
}
/** @type {NodeListOf<HTMLElement>} */
const focusableElementsWithTabindex = popup.querySelectorAll('[tabindex]:not([tabindex="-1"]):not([tabindex="0"])');
const focusableElementsWithTabindexSorted = Array.from(focusableElementsWithTabindex)
// sort according to tabindex
.sort((a, b) => {
const tabindexA = parseInt(a.getAttribute('tabindex') || '0');
const tabindexB = parseInt(b.getAttribute('tabindex') || '0');
if (tabindexA > tabindexB) {
return 1;
} else if (tabindexA < tabindexB) {
return -1;
}
return 0;
});
/** @type {NodeListOf<HTMLElement>} */
const otherFocusableElements = popup.querySelectorAll(focusable);
const otherFocusableElementsFiltered = Array.from(otherFocusableElements).filter(el => el.getAttribute('tabindex') !== '-1');
return [...new Set(focusableElementsWithTabindexSorted.concat(otherFocusableElementsFiltered))].filter(el => isVisible$1(el));
};
/**
* @returns {boolean}
*/
const isModal = () => {
return hasClass(document.body, swalClasses.shown) && !hasClass(document.body, swalClasses['toast-shown']) && !hasClass(document.body, swalClasses['no-backdrop']);
};
/**
* @returns {boolean}
*/
const isToast = () => {
const popup = getPopup();
if (!popup) {
return false;
}
return hasClass(popup, swalClasses.toast);
};
/**
* @returns {boolean}
*/
const isLoading = () => {
const popup = getPopup();
if (!popup) {
return false;
}
return popup.hasAttribute('data-loading');
};
/**
* Securely set innerHTML of an element
* https://github.com/sweetalert2/sweetalert2/issues/1926
*
* @param {HTMLElement} elem
* @param {string} html
*/
const setInnerHtml = (elem, html) => {
elem.textContent = '';
if (html) {
const parser = new DOMParser();
const parsed = parser.parseFromString(html, `text/html`);
const head = parsed.querySelector('head');
if (head) {
Array.from(head.childNodes).forEach(child => {
elem.appendChild(child);
});
}
const body = parsed.querySelector('body');
if (body) {
Array.from(body.childNodes).forEach(child => {
if (child instanceof HTMLVideoElement || child instanceof HTMLAudioElement) {
elem.appendChild(child.cloneNode(true)); // https://github.com/sweetalert2/sweetalert2/issues/2507
} else {
elem.appendChild(child);
}
});
}
}
};
/**
* @param {HTMLElement} elem
* @param {string} className
* @returns {boolean}
*/
const hasClass = (elem, className) => {
if (!className) {
return false;
}
const classList = className.split(/\s+/);
for (let i = 0; i < classList.length; i++) {
if (!elem.classList.contains(classList[i])) {
return false;
}
}
return true;
};
/**
* @param {HTMLElement} elem
* @param {SweetAlertOptions} params
*/
const removeCustomClasses = (elem, params) => {
Array.from(elem.classList).forEach(className => {
if (!Object.values(swalClasses).includes(className) && !Object.values(iconTypes).includes(className) && !Object.values(params.showClass || {}).includes(className)) {
elem.classList.remove(className);
}
});
};
/**
* @param {HTMLElement} elem
* @param {SweetAlertOptions} params
* @param {string} className
*/
const applyCustomClass = (elem, params, className) => {
removeCustomClasses(elem, params);
if (!params.customClass) {
return;
}
const customClass = params.customClass[(/** @type {keyof SweetAlertCustomClass} */className)];
if (!customClass) {
return;
}
if (typeof customClass !== 'string' && !customClass.forEach) {
warn(`Invalid type of customClass.${className}! Expected string or iterable object, got "${typeof customClass}"`);
return;
}
addClass(elem, customClass);
};
/**
* @param {HTMLElement} popup
* @param {import('./renderers/renderInput').InputClass | SweetAlertInput} inputClass
* @returns {HTMLInputElement | null}
*/
const getInput$1 = (popup, inputClass) => {
if (!inputClass) {
return null;
}
switch (inputClass) {
case 'select':
case 'textarea':
case 'file':
return popup.querySelector(`.${swalClasses.popup} > .${swalClasses[inputClass]}`);
case 'checkbox':
return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.checkbox} input`);
case 'radio':
return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.radio} input:checked`) || popup.querySelector(`.${swalClasses.popup} > .${swalClasses.radio} input:first-child`);
case 'range':
return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.range} input`);
default:
return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.input}`);
}
};
/**
* @param {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} input
*/
const focusInput = input => {
input.focus();
// place cursor at end of text in text input
if (input.type !== 'file') {
// http://stackoverflow.com/a/2345915
const val = input.value;
input.value = '';
input.value = val;
}
};
/**
* @param {HTMLElement | HTMLElement[] | null} target
* @param {string | string[] | readonly string[] | undefined} classList
* @param {boolean} condition
*/
const toggleClass = (target, classList, condition) => {
if (!target || !classList) {
return;
}
if (typeof classList === 'string') {
classList = classList.split(/\s+/).filter(Boolean);
}
classList.forEach(className => {
if (Array.isArray(target)) {
target.forEach(elem => {
if (condition) {
elem.classList.add(className);
} else {
elem.classList.remove(className);
}
});
} else {
if (condition) {
target.classList.add(className);
} else {
target.classList.remove(className);
}
}
});
};
/**
* @param {HTMLElement | HTMLElement[] | null} target
* @param {string | string[] | readonly string[] | undefined} classList
*/
const addClass = (target, classList) => {
toggleClass(target, classList, true);
};
/**
* @param {HTMLElement | HTMLElement[] | null} target
* @param {string | string[] | readonly string[] | undefined} classList
*/
const removeClass = (target, classList) => {
toggleClass(target, classList, false);
};
/**
* Get direct child of an element by class name
*
* @param {HTMLElement} elem
* @param {string} className
* @returns {HTMLElement | undefined}
*/
const getDirectChildByClass = (elem, className) => {
const children = Array.from(elem.children);
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child instanceof HTMLElement && hasClass(child, className)) {
return child;
}
}
};
/**
* @param {HTMLElement} elem
* @param {string} property
* @param {*} value
*/
const applyNumericalStyle = (elem, property, value) => {
if (value === `${parseInt(value)}`) {
value = parseInt(value);
}
if (value || parseInt(value) === 0) {
elem.style.setProperty(property, typeof value === 'number' ? `${value}px` : value);
} else {
elem.style.removeProperty(property);
}
};
/**
* @param {HTMLElement | null} elem
* @param {string} display
*/
const show = (elem, display = 'flex') => {
if (!elem) {
return;
}
elem.style.display = display;
};
/**
* @param {HTMLElement | null} elem
*/
const hide = elem => {
if (!elem) {
return;
}
elem.style.display = 'none';
};
/**
* @param {HTMLElement | null} elem
* @param {string} display
*/
const showWhenInnerHtmlPresent = (elem, display = 'block') => {
if (!elem) {
return;
}
new MutationObserver(() => {
toggle(elem, elem.innerHTML, display);
}).observe(elem, {
childList: true,
subtree: true
});
};
/**
* @param {HTMLElement} parent
* @param {string} selector
* @param {string} property
* @param {string} value
*/
const setStyle = (parent, selector, property, value) => {
/** @type {HTMLElement | null} */
const el = parent.querySelector(selector);
if (el) {
el.style.setProperty(property, value);
}
};
/**
* @param {HTMLElement} elem
* @param {any} condition
* @param {string} display
*/
const toggle = (elem, condition, display = 'flex') => {
if (condition) {
show(elem, display);
} else {
hide(elem);
}
};
/**
* borrowed from jquery $(elem).is(':visible') implementation
*
* @param {HTMLElement | null} elem
* @returns {boolean}
*/
const isVisible$1 = elem => !!(elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length));
/**
* @returns {boolean}
*/
const allButtonsAreHidden = () => !isVisible$1(getConfirmButton()) && !isVisible$1(getDenyButton()) && !isVisible$1(getCancelButton());
/**
* @param {HTMLElement} elem
* @returns {boolean}
*/
const isScrollable = elem => !!(elem.scrollHeight > elem.clientHeight);
/**
* @param {HTMLElement} element
* @param {HTMLElement} stopElement
* @returns {boolean}
*/
const selfOrParentIsScrollable = (element, stopElement) => {
let parent = element;
while (parent && parent !== stopElement) {
if (isScrollable(parent)) {
return true;
}
parent = parent.parentElement;
}
return false;
};
/**
* borrowed from https://stackoverflow.com/a/46352119
*
* @param {HTMLElement} elem
* @returns {boolean}
*/
const hasCssAnimation = elem => {
const style = window.getComputedStyle(elem);
const animDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');
const transDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
return animDuration > 0 || transDuration > 0;
};
/**
* @param {number} timer
* @param {boolean} reset
*/
const animateTimerProgressBar = (timer, reset = false) => {
const timerProgressBar = getTim