sapenlinea-components 0.0.40 → 0.0.41
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.
|
@@ -2626,11 +2626,11 @@ class SideCard {
|
|
|
2626
2626
|
height <= 420;
|
|
2627
2627
|
}
|
|
2628
2628
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCard, isStandalone: true, selector: "lib-side-card", inputs: { isFloating: "isFloating", modeSideCard: "modeSideCard", showTypeSelector: "showTypeSelector", placeholder: "placeholder", value: "value", statusValue: "statusValue", sections: "sections", min: "min", max: "max", showBtnPrimary: "showBtnPrimary", primaryButtonLabel: "primaryButtonLabel", showBtnSecondary: "showBtnSecondary", secondaryButtonLabel: "secondaryButtonLabel" }, outputs: { btnClickIcon: "btnClickIcon", valueChange: "valueChange", typeChange: "typeChange", statusChange: "statusChange", sectionButtonClick: "sectionButtonClick", sliderChange: "sliderChange", buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n @if (modeSideCard === 'create' && showTypeSelector) {\r\n <div class=\"button-group\">\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n Radial\r\n </button>\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n Poligonal\r\n </button>\r\n </div>\r\n }\r\n <div class=\"text-container\">\r\n <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n (input)=\"onInput($event)\" [disabled]=\"modeSideCard === 'info'\" />\r\n @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n <path d=\"M16 5l3 3\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n <span #statusChip class=\"status-chip\" [class.status-chip--disabled]=\"modeSideCard === 'info'\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n {{ statusLabel }}\r\n </span>\r\n }\r\n </div>\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.label) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ item.value }}</span>\r\n </div>\r\n } } @if (section.showSlider) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ sliderLabel }}</span>\r\n <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n </div>\r\n @if (modeSideCard !== 'info') {\r\n <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"side-card-actions\">\r\n @if (showBtnPrimary) {\r\n <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n }\r\n @if (showBtnSecondary) {\r\n <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border-color:#dee58f}.btn-type:active{background-color:#61661f;color:#fff;border-color:#61661f}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip--disabled{pointer-events:none;cursor:default}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign.agent{background-color:#596300;color:#fff}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCard, isStandalone: true, selector: "lib-side-card", inputs: { isFloating: "isFloating", modeSideCard: "modeSideCard", showTypeSelector: "showTypeSelector", placeholder: "placeholder", value: "value", statusValue: "statusValue", sections: "sections", min: "min", max: "max", showBtnPrimary: "showBtnPrimary", primaryButtonLabel: "primaryButtonLabel", showBtnSecondary: "showBtnSecondary", secondaryButtonLabel: "secondaryButtonLabel" }, outputs: { btnClickIcon: "btnClickIcon", valueChange: "valueChange", typeChange: "typeChange", statusChange: "statusChange", sectionButtonClick: "sectionButtonClick", sliderChange: "sliderChange", buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n @if (modeSideCard === 'create' && showTypeSelector) {\r\n <div class=\"button-group\">\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n Radial\r\n </button>\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n Poligonal\r\n </button>\r\n </div>\r\n }\r\n <div class=\"text-container\">\r\n <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n (input)=\"onInput($event)\" [disabled]=\"modeSideCard === 'info'\" />\r\n @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n <path d=\"M16 5l3 3\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n <span #statusChip class=\"status-chip\" [class.status-chip--disabled]=\"modeSideCard === 'info'\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n {{ statusLabel }}\r\n </span>\r\n }\r\n </div>\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.label) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ item.value }}</span>\r\n </div>\r\n } } @if (section.showSlider) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ sliderLabel }}</span>\r\n <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n </div>\r\n @if (modeSideCard !== 'info') {\r\n <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n [style.--slider-value]=\"sliderPercentage\" step=\"0.01\" (input)=\"onSliderChange($event)\" />\r\n }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"side-card-actions\">\r\n @if (showBtnPrimary) {\r\n <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n }\r\n @if (showBtnSecondary) {\r\n <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border-color:#dee58f}.btn-type:active{background-color:#61661f;color:#fff;border-color:#61661f}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip--disabled{pointer-events:none;cursor:default}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign.agent{background-color:#596300;color:#fff}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2630
2630
|
}
|
|
2631
2631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, decorators: [{
|
|
2632
2632
|
type: Component,
|
|
2633
|
-
args: [{ selector: 'lib-side-card', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n @if (modeSideCard === 'create' && showTypeSelector) {\r\n <div class=\"button-group\">\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n Radial\r\n </button>\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n Poligonal\r\n </button>\r\n </div>\r\n }\r\n <div class=\"text-container\">\r\n <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n (input)=\"onInput($event)\" [disabled]=\"modeSideCard === 'info'\" />\r\n @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n <path d=\"M16 5l3 3\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n <span #statusChip class=\"status-chip\" [class.status-chip--disabled]=\"modeSideCard === 'info'\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n {{ statusLabel }}\r\n </span>\r\n }\r\n </div>\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.label) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ item.value }}</span>\r\n </div>\r\n } } @if (section.showSlider) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ sliderLabel }}</span>\r\n <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n </div>\r\n @if (modeSideCard !== 'info') {\r\n <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"side-card-actions\">\r\n @if (showBtnPrimary) {\r\n <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n }\r\n @if (showBtnSecondary) {\r\n <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border-color:#dee58f}.btn-type:active{background-color:#61661f;color:#fff;border-color:#61661f}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip--disabled{pointer-events:none;cursor:default}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign.agent{background-color:#596300;color:#fff}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"] }]
|
|
2633
|
+
args: [{ selector: 'lib-side-card', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n @if (modeSideCard === 'create' && showTypeSelector) {\r\n <div class=\"button-group\">\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n Radial\r\n </button>\r\n <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n Poligonal\r\n </button>\r\n </div>\r\n }\r\n <div class=\"text-container\">\r\n <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n (input)=\"onInput($event)\" [disabled]=\"modeSideCard === 'info'\" />\r\n @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n <path d=\"M16 5l3 3\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n <span #statusChip class=\"status-chip\" [class.status-chip--disabled]=\"modeSideCard === 'info'\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n {{ statusLabel }}\r\n </span>\r\n }\r\n </div>\r\n @for (section of sections; track section.title) {\r\n <div class=\"element-section\">\r\n <h3>{{ section.title }}</h3>\r\n\r\n <div class=\"element-content\">\r\n @if (section.items?.length) { @for (item of section.items; track\r\n item.label) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ item.label }}</span>\r\n <span class=\"value\">{{ item.value }}</span>\r\n </div>\r\n } } @if (section.showSlider) {\r\n <div class=\"element-item\">\r\n <span class=\"label\">{{ sliderLabel }}</span>\r\n <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n </div>\r\n @if (modeSideCard !== 'info') {\r\n <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n [style.--slider-value]=\"sliderPercentage\" step=\"0.01\" (input)=\"onSliderChange($event)\" />\r\n }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"side-card-actions\">\r\n @if (showBtnPrimary) {\r\n <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n }\r\n @if (showBtnSecondary) {\r\n <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border-color:#dee58f}.btn-type:active{background-color:#61661f;color:#fff;border-color:#61661f}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip--disabled{pointer-events:none;cursor:default}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign.agent{background-color:#596300;color:#fff}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"] }]
|
|
2634
2634
|
}], propDecorators: { wrapper: [{
|
|
2635
2635
|
type: ViewChild,
|
|
2636
2636
|
args: ['SideCard', { static: true }]
|
|
@@ -2884,11 +2884,11 @@ class DevicesCarousel {
|
|
|
2884
2884
|
this.btnClickIcon.emit(dc);
|
|
2885
2885
|
}
|
|
2886
2886
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DevicesCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2887
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DevicesCarousel, isStandalone: true, selector: "lib-devices-carousel", inputs: { devices: "devices" }, outputs: { btnClickIcon: "btnClickIcon" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\r\n <div class=\"carousel-wrapper\">\r\n\r\n @if (canScrollLeft) {\r\n <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m15 6-6 6 6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n <div class=\"carousel-mask\">\r\n <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n @for (d of devices; track d.code) {\r\n <div class=\"device-card\">\r\n <div class=\"card-header\">\r\n <div class=\"header-title-wrapper\">\r\n <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n </div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon(d)\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n </svg>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"device-info\">\r\n <span>{{ d.deviceInfo }}</span>\r\n <div class=\"icons\">\r\n @if (d.status.wifi) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\">\r\n <title>En L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Fuera de L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n </svg>\r\n } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>76-100%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>51-75%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>21-50%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>1-20%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>0%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n </g>\r\n </svg>\r\n }\r\n @if (d.status.signalStatus! >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Excelente</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n </svg>\r\n } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Buena</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Regular</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Mala</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Sin Se\u00F1al</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n </svg>\r\n }\r\n @if (d.status.bluetooth) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Conectado</title>\r\n <path fill=\"#454733\"\r\n d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Desconectado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n </svg>\r\n }\r\n @if (d.status.gps) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>No Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"card-footer\">\r\n <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n </span>\r\n\r\n <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n </div>\r\n\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (canScrollRight) {\r\n <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m9 6 6 6-6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:start}.header-title-wrapper{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:2px}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase;font-weight:500}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2887
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DevicesCarousel, isStandalone: true, selector: "lib-devices-carousel", inputs: { devices: "devices" }, outputs: { btnClickIcon: "btnClickIcon" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\r\n <div class=\"carousel-wrapper\">\r\n\r\n @if (canScrollLeft) {\r\n <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m15 6-6 6 6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n <div class=\"carousel-mask\">\r\n <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n @for (d of devices; track d.code) {\r\n <div class=\"device-card\">\r\n <div class=\"card-header\">\r\n <div class=\"header-title-wrapper\">\r\n <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n </div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon(d)\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n </svg>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"device-info\">\r\n <span>{{ d.deviceInfo }}</span>\r\n <div class=\"icons\">\r\n @if (d.status.wifi) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\">\r\n <title>En L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Fuera de L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n </svg>\r\n } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>d.status.batteryPercentaje</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>51-75%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>21-50%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>1-20%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>0%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n </g>\r\n </svg>\r\n }\r\n @if (d.status.signalStatus! >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Excelente</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n </svg>\r\n } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Buena</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Regular</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Mala</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Sin Se\u00F1al</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n </svg>\r\n }\r\n @if (d.status.bluetooth) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Conectado</title>\r\n <path fill=\"#454733\"\r\n d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Desconectado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n </svg>\r\n }\r\n @if (d.status.gps) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>No Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"card-footer\">\r\n <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n </span>\r\n\r\n <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n </div>\r\n\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (canScrollRight) {\r\n <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m9 6 6 6-6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:start}.header-title-wrapper{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:2px}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase;font-weight:500}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2888
2888
|
}
|
|
2889
2889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DevicesCarousel, decorators: [{
|
|
2890
2890
|
type: Component,
|
|
2891
|
-
args: [{ selector: 'lib-devices-carousel', imports: [CommonModule], template: "<div class=\"carousel-container\">\r\n <div class=\"carousel-wrapper\">\r\n\r\n @if (canScrollLeft) {\r\n <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m15 6-6 6 6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n <div class=\"carousel-mask\">\r\n <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n @for (d of devices; track d.code) {\r\n <div class=\"device-card\">\r\n <div class=\"card-header\">\r\n <div class=\"header-title-wrapper\">\r\n <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n </div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon(d)\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n </svg>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"device-info\">\r\n <span>{{ d.deviceInfo }}</span>\r\n <div class=\"icons\">\r\n @if (d.status.wifi) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\">\r\n <title>En L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Fuera de L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n </svg>\r\n } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>76-100%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>51-75%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>21-50%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>1-20%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>0%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n </g>\r\n </svg>\r\n }\r\n @if (d.status.signalStatus! >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Excelente</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n </svg>\r\n } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Buena</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Regular</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Mala</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Sin Se\u00F1al</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n </svg>\r\n }\r\n @if (d.status.bluetooth) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Conectado</title>\r\n <path fill=\"#454733\"\r\n d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Desconectado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n </svg>\r\n }\r\n @if (d.status.gps) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>No Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"card-footer\">\r\n <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n </span>\r\n\r\n <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n </div>\r\n\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (canScrollRight) {\r\n <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m9 6 6 6-6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:start}.header-title-wrapper{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:2px}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase;font-weight:500}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}\n"] }]
|
|
2891
|
+
args: [{ selector: 'lib-devices-carousel', imports: [CommonModule], template: "<div class=\"carousel-container\">\r\n <div class=\"carousel-wrapper\">\r\n\r\n @if (canScrollLeft) {\r\n <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m15 6-6 6 6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n <div class=\"carousel-mask\">\r\n <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n @for (d of devices; track d.code) {\r\n <div class=\"device-card\">\r\n <div class=\"card-header\">\r\n <div class=\"header-title-wrapper\">\r\n <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n </div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n (click)=\"buttonClickIcon(d)\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n </svg>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"device-info\">\r\n <span>{{ d.deviceInfo }}</span>\r\n <div class=\"icons\">\r\n @if (d.status.wifi) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\">\r\n <title>En L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Fuera de L\u00EDnea</title>\r\n <path fill=\"#454733\"\r\n d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n </svg>\r\n } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>d.status.batteryPercentaje</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>51-75%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>21-50%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>1-20%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n </g>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n viewBox=\"0 0 32 32\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>0%</title>\r\n <path\r\n d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n </g>\r\n </svg>\r\n }\r\n @if (d.status.signalStatus! >= 4) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Excelente</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n </svg>\r\n } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Buena</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Regular</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <title>Mala</title>\r\n <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n <path id=\"Combined-Shape\"\r\n d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Sin Se\u00F1al</title>\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n </svg>\r\n }\r\n @if (d.status.bluetooth) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Conectado</title>\r\n <path fill=\"#454733\"\r\n d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <title>Desconectado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n </svg>\r\n }\r\n @if (d.status.gps) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <title>No Localizado</title>\r\n <path fill=\"#454733\"\r\n d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"card-footer\">\r\n <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n </span>\r\n\r\n <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n </div>\r\n\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (canScrollRight) {\r\n <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m9 6 6 6-6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:start}.header-title-wrapper{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:2px}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase;font-weight:500}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}\n"] }]
|
|
2892
2892
|
}], propDecorators: { devices: [{
|
|
2893
2893
|
type: Input$1
|
|
2894
2894
|
}], btnClickIcon: [{
|
|
@@ -3026,6 +3026,7 @@ class NotificationModal {
|
|
|
3026
3026
|
'¡EMERGENCIA!'
|
|
3027
3027
|
];
|
|
3028
3028
|
messageValue = '';
|
|
3029
|
+
messageChange = new EventEmitter();
|
|
3029
3030
|
selectDefaultMessage(message) {
|
|
3030
3031
|
this.messageValue = message;
|
|
3031
3032
|
this.mode = 'edit';
|
|
@@ -3049,11 +3050,11 @@ class NotificationModal {
|
|
|
3049
3050
|
this.messageValue = '';
|
|
3050
3051
|
}
|
|
3051
3052
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3052
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\"
|
|
3053
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo", messageValue: "messageValue" }, outputs: { buttonClick: "buttonClick", messageChange: "messageChange" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\" [value]=\"messageValue\"></textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.icon{color:#596300}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3053
3054
|
}
|
|
3054
3055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, decorators: [{
|
|
3055
3056
|
type: Component,
|
|
3056
|
-
args: [{ selector: 'lib-notification-modal', imports: [CommonModule], template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\"
|
|
3057
|
+
args: [{ selector: 'lib-notification-modal', imports: [CommonModule], template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\" [value]=\"messageValue\"></textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.icon{color:#596300}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"] }]
|
|
3057
3058
|
}], propDecorators: { messageInput: [{
|
|
3058
3059
|
type: ViewChild,
|
|
3059
3060
|
args: ['messageInput']
|
|
@@ -3061,6 +3062,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3061
3062
|
type: Input$1
|
|
3062
3063
|
}], buttonClick: [{
|
|
3063
3064
|
type: Output
|
|
3065
|
+
}], messageValue: [{
|
|
3066
|
+
type: Input$1
|
|
3067
|
+
}], messageChange: [{
|
|
3068
|
+
type: Output
|
|
3064
3069
|
}] } });
|
|
3065
3070
|
|
|
3066
3071
|
class Footer {
|