ngx-favorite-pages
Version:
Stencil Component Starter
645 lines (644 loc) • 36.3 kB
JavaScript
import { Host, h } from "@stencil/core";
export class FavoritePages {
host;
showModal = false;
slug;
path;
currentRouteSlug;
favorites = []; // Store favorite pages
isFavorite = false; // State to track favorite status
pageId;
pageTitle;
apiUrl;
cultureCode;
applicationId;
isCultureLoaded = false;
selectedTabName;
modalType = 'add'; // To distinguish between add and edit modal
editingPage = null; // Holds page data when editing;
isEditMode = false; // Initialize this variable
isShowEditIcons = false;
authToken;
isFetching = false;
showToastFlag;
toastType;
toastMessage;
// handlePropertyChange() {
// this.fetchInitiateValue();
// }
componentWillLoad() {
this.fetchInitiateValue();
// this.overrideHistoryMethods();
// window.addEventListener('popstate', this.handleRouteChange); // Handles back/forward navigation
}
componentDidLoad() {
// this.fetchInitiateValue();
// if (this.host.shadowRoot) {
// const existingLink = this.host.shadowRoot.querySelector('link[rel="stylesheet"]');
// if (!existingLink) {
// const link = document.createElement('link');
// link.rel = 'stylesheet';
// link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
// this.host.shadowRoot.appendChild(link);
// // console.log('FontAwesome added to shadow DOM');
// } else {
// console.log('FontAwesome already added to shadow DOM');
// }
// } else {
// console.warn('shadowRoot is null');
// }
}
// disconnectedCallback() {
// window.removeEventListener('popstate', this.handleRouteChange);
// }
overrideHistoryMethods() {
const pushState = history.pushState;
const replaceState = history.replaceState;
history.pushState = (...args) => {
pushState.apply(history, args);
this.handleRouteChange(); // Trigger update when `pushState` is called
};
history.replaceState = (...args) => {
replaceState.apply(history, args);
this.handleRouteChange(); // Trigger update when `replaceState` is called
};
}
handleRouteChange = () => {
this.fetchInitiateValue();
};
async fetchInitiateValue() {
if (!this.cultureCode || !this.applicationId || !this.apiUrl) {
this.showToast('Something went wrong', 'error');
return;
}
await this.getFavoritePages();
}
async getFavoritePages() {
try {
const response = await fetch(`${this.apiUrl}/api/Pages/FavoritePages`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationId': this.applicationId,
},
credentials: 'include',
});
if (!response.ok) {
this.showToast('Something went wrong', 'error');
return;
}
if (response.ok) {
const data = await response.json();
this.favorites = data.content;
if (this.favorites.some(fav => fav.pageId === this.pageId)) {
this.isFavorite = true;
}
else {
this.isFavorite = false;
}
}
else {
this.showToast('Something went wrong', 'error');
}
}
catch (error) {
this.showToast('Something went wrong', 'error');
// console.error('Error fetching favorite pages:', error);
}
}
// Add a favorite
async addFavorite() {
const pageTitle = this.pageTitle;
const pageId = this.pageId;
if (!pageId || !this.pageTitle) {
// console.error('Page ID is missing.');
this.showToast('Something went wrong', 'error');
return;
}
if (this.favorites.some(fav => fav.pageId === pageId)) {
// console.log('Page is already in favorites.');
this.isFavorite = true;
return;
}
const requestBody = { name: pageTitle };
try {
const response = await fetch(`${this.apiUrl}/api/Pages/AddFavoritePages/${pageId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationId': this.applicationId,
},
credentials: 'include',
body: JSON.stringify(requestBody),
});
const data = await response.json();
this.getFavoritePages();
console.log('Page added to favorites successfully:', data);
}
catch (error) {
// console.error('Error adding favorite page:', error);
this.showToast('Something went wrong', 'error');
}
}
showToast(message, type = 'success') {
this.toastMessage = message;
this.toastType = type;
this.showToastFlag = true;
setTimeout(() => {
this.showToastFlag = false;
}, 3000);
}
// Delete a favorite
async deleteFavorite(pageId) {
if (!pageId) {
this.showToast('Something went wrong', 'error');
return;
}
try {
await fetch(`${this.apiUrl}/api/Pages/RemoveFavouritePage/${pageId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationid': this.applicationId,
},
credentials: 'include',
});
// this.favorites = this.favorites.filter(fav => fav.pageId !== pageId);
this.getFavoritePages();
this.isFavorite = false;
this.isEditMode = false;
// console.log('Favorite page removed successfully.');
}
catch (error) {
// console.error('Error removing favorite page:', error);
this.showToast('Something went wrong', 'error');
}
}
showEditIcons() {
this.isEditMode = true;
this.editingPage = null;
}
editFavorite(fav, index) {
const favorite = this.favorites[index];
this.editingPage = favorite; // Set page for editing
this.modalType = 'edit'; // Set modal type to 'edit'
this.pageId = fav.pageId;
this.isShowEditIcons = true;
}
doneEditing() {
this.saveEditedFavorite();
}
async saveEditedFavorite() {
if (!this.editingPage) {
return;
}
const { pageId, name } = this.editingPage;
const requestBody = { name };
try {
await fetch(`${this.apiUrl}/api/Pages/EditFavouritePage/${pageId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'IntegrationPermission': '0f5d983d203189bbffc5f686d01f6680bc6a83718a515fe42639347efc92478e',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationId': this.applicationId,
},
credentials: 'include',
body: JSON.stringify(requestBody),
});
this.getFavoritePages();
this.isEditMode = false;
// console.log('Favorite page name updated successfully.');
}
catch (error) {
// console.error('Error updating favorite page:', error);
this.showToast('Something went wrong', 'error');
}
}
get favoriteForCurrentPage() {
return this.favorites.find(fav => fav.pageId === this.pageId);
}
toggleModal() {
this.showModal = !this.showModal;
this.modalType = 'add'; // Reset to 'add' when modal is closed
this.editingPage = null; // Clear any selected page for editing
}
async onDone() {
if (this.modalType === 'edit' && this.editingPage?.name) {
await this.saveEditedFavorite();
}
this.showModal = false;
}
async handleEdit(fav) {
if (this.isEditMode && this.editingPage?.pageId === fav.pageId) {
this.saveEditedFavorite();
}
else {
this.isEditMode = true;
this.editingPage = { ...fav };
}
}
render() {
return (h(Host, { key: 'e092e934ec8d51ce76ce1043c2cdc24e860efeb0' }, h("div", { key: '113e6f9135764ee9a7c8aed76f892c181186cecc', class: "fav-cont" }, h("div", { key: 'ff0f66101ad8e27d3489a5798cbabde7311df78f', class: "kt-subheader__main dina" }, h("div", { key: 'bc91486a9250ede1d3124350253a6c34806ba4c9', class: "kt-subheader__breadcrumbs" }, this.favorites.map(fav => (h("span", { class: "kt-subheader__breadcrumbs-link kt-subheader__breadcrumbs-item" }, h("a", { class: "kt-subheader__breadcrumbs-link" }, this.isEditMode && this.editingPage?.pageId == fav.pageId ? (h("input", { type: "text", value: this.editingPage?.name, onInput: e => (this.editingPage.name = e.target.value) })) : (h("a", { href: fav.url, target: "_self", class: "kt-subheader__breadcrumbs-link" }, fav.name))), this.isEditMode && (h(h.Fragment, null, h("a", { class: "kt-subheader__breadcrumbs-link", title: "Edit", onClick: () => this.handleEdit(fav) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15px", height: "15px", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M18.3282 8.32837L15.8939 5.89405C14.7058 4.706 14.1118 4.11198 13.4268 3.88941C12.8243 3.69364 12.1752 3.69364 11.5727 3.88941C10.8877 4.11198 10.2937 4.706 9.10564 5.89405L7.49975 7.49994M3 20.9997L3.04745 20.6675C3.21536 19.4922 3.29932 18.9045 3.49029 18.3558C3.65975 17.8689 3.89124 17.4059 4.17906 16.9783C4.50341 16.4963 4.92319 16.0765 5.76274 15.237L17.4107 3.58896C18.1918 2.80791 19.4581 2.80791 20.2392 3.58896C21.0202 4.37001 21.0202 5.63634 20.2392 6.41739L8.37744 18.2791C7.61579 19.0408 7.23497 19.4216 6.8012 19.7244C6.41618 19.9932 6.00093 20.2159 5.56398 20.3879C5.07171 20.5817 4.54375 20.6882 3.48793 20.9012L3 20.9997Z", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("a", { class: "kt-subheader__breadcrumbs-link", title: "Remove", onClick: () => this.deleteFavorite(fav.pageId) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15px", height: "15px", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), ' ')))))))), h("div", { key: 'b679d2af402bceafa38a289be6fc575878286f06', class: "kt-subheader__toolbar" }, h("div", { key: '07e5e6ce7ec9e48383de51379c5ec28304633dc4', class: "kt-subheader__wrapper" }, this.favorites.length === 0 || !this.isFavorite ? (h("a", { class: "btn btn-icon", title: "Add to Favorite", onClick: () => this.addFavorite() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", version: "1.1", class: "kt-svg-icon inactive" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("polygon", { points: "0 0 24 0 24 24 0 24" }), h("path", { d: "M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z", fill: "#000000" }))))) : (h("a", { class: "btn btn-icon", title: "Favorite", onClick: () => this.addFavorite() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", version: "1.1", class: "kt-svg-icon" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("polygon", { points: "0 0 24 0 24 24 0 24" }), h("path", { d: "M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z", fill: "#000000" }))))), this.favorites.length > 0 && (h("a", { key: '2b91b9e37ea65668cb00025acae7f502c7398e21', class: "btn btn-icon", title: "Edit", onClick: () => this.showEditIcons() }, h("svg", { key: '64ad840c066acd0e20dff146523091966b4dbfc6', xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", version: "1.1", class: "kt-svg-icon" }, h("g", { key: '0b52263f9c5436ce481b88fbbffc2ce160299760', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '53adc3b8b815fa509bbdd07d498815cb779e22bb', x: "0", y: "0", width: "24", height: "24" }), h("path", { key: '5848dfab604c126efcb01cc7c2cd2933795ff3e0', d: "M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z", fill: "#000000", "fill-rule": "nonzero", transform: "translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " }), h("rect", { key: '309972499ee9e7b0d47f7fb6390f93d7262da48e', fill: "#000000", opacity: "0.3", x: "5", y: "20", width: "15", height: "2", rx: "1" }))))), this.showToastFlag && h("div", { key: '030b9ddf10a7be9b87c024867988d8f7ae820a23', class: `toast ${this.toastType}` }, this.toastMessage))))));
}
static get is() { return "favorite-pages"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["favorite-pages.css"]
};
}
static get styleUrls() {
return {
"$": ["favorite-pages.css"]
};
}
static get properties() {
return {
"pageId": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "page-id",
"reflect": false
},
"pageTitle": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "page-title",
"reflect": false
},
"apiUrl": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "api-url",
"reflect": false
},
"cultureCode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "culture-code",
"reflect": false
},
"applicationId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "application-id",
"reflect": false
}
};
}
static get states() {
return {
"showModal": {},
"slug": {},
"path": {},
"currentRouteSlug": {},
"favorites": {},
"isFavorite": {},
"isCultureLoaded": {},
"selectedTabName": {},
"modalType": {},
"editingPage": {},
"isEditMode": {},
"isShowEditIcons": {},
"authToken": {},
"isFetching": {},
"showToastFlag": {},
"toastType": {},
"toastMessage": {}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "cultureCode",
"methodName": "componentWillLoad"
}, {
"propName": "applicationId",
"methodName": "componentWillLoad"
}, {
"propName": "pageId",
"methodName": "componentWillLoad"
}, {
"propName": "apiUrl",
"methodName": "componentWillLoad"
}, {
"propName": "pageTitle",
"methodName": "componentWillLoad"
}];
}
}
// import { Component, Host, Prop, State, Watch, h } from '@stencil/core';
// @Component({
// tag: 'favorite-pages',
// styleUrl: 'favorite-pages.css',
// shadow: true,
// })
// export class FavoritePages {
// @State() isFavorite: boolean = false; // Default is false
// @Prop() pageId: number;
// @State() editingPage: any = null;
// @State() isEditMode: boolean = false;
// @Prop() favorites: FavoriteItem[] = [];
// @Prop() getFavoritesCallback: () => Promise<ApiResponse>;
// @Prop() addFavoriteCallback: () => Promise<{ code: number; content: string }>;
// @Prop() updateFavoriteCallback: (fav: any) => Promise<{ code: number; content: string }>;
// @Prop() removeFavoriteCallback: (pageId: number) => Promise<{ code: number; content: string }>;
// async componentWillLoad() {
// // console.log('[Stencil] Component is loading...');
// if (this.getFavoritesCallback) {
// try {
// const response = await this.getFavoritesCallback(); // Call the Angular function
// if (response?.code === '200' && Array.isArray(response.content)) {
// this.favorites = response.content; // Set the content array into local state
// // console.log('Favorites from Angular:', this.favorites);
// }
// // console.log('Favorites from Angular:', response);
// } catch (err) {
// // console.error('Error getting favorites:', err);
// }
// }
// }
// @Watch('favorites')
// watchFavorites() {
// // console.log('[Stencil] Watcher triggered - New favorites:', newValue);
// this.isFavorite = this.favorites.some(f => f.pageId == this.pageId);
// }
// showEditIcons() {
// this.isEditMode = true;
// this.editingPage = null;
// }
// async handleEdit(fav: any) {
// // console.log(this.editingPage, 'this.editingPage 334444 in stencil ');
// if (this.isEditMode && this.editingPage?.pageId === fav.pageId) {
// if (this.updateFavoriteCallback) {
// const res = await this.updateFavoriteCallback(this.editingPage);
// if (res?.code === 200 && res?.content == 'true') {
// this.isEditMode = false;
// const favoritesData = await this.getFavoritesCallback();
// if (Array.isArray(favoritesData?.content)) {
// this.favorites = favoritesData.content;
// } else {
// // console.error('Favorites data is not in the expected format', favoritesData);
// }
// } else {
// // console.error('Failed to update favorite');
// }
// }
// } else {
// this.isEditMode = true;
// this.editingPage = { ...fav };
// }
// }
// handleInput(e: Event) {
// const input = e.target as HTMLInputElement;
// this.editingPage.name = input.value;
// }
// async handleRemoveFavorite(pageId: number) {
// try {
// const result = await this.removeFavoriteCallback(pageId);
// if (result?.code === 200 && result?.content == 'true') {
// this.isFavorite = false;
// const favoritesData = await this.getFavoritesCallback();
// if (Array.isArray(favoritesData?.content)) {
// this.favorites = favoritesData.content;
// } else {
// // console.error('Favorites data is not in the expected format', favoritesData);
// }
// } else {
// // console.warn('Remove favorite failed');
// }
// } catch (err) {
// // console.error('Error removing favorite:', err);
// }
// }
// async addFavorite() {
// if (this.addFavoriteCallback) {
// try {
// const result = await this.addFavoriteCallback();
// if (result?.code === 200 && result?.content == 'The page has been successfully added to your favorites') {
// this.isFavorite = true;
// this.isEditMode = false;
// const favoritesData = await this.getFavoritesCallback();
// if (Array.isArray(favoritesData?.content)) {
// this.favorites = favoritesData.content;
// } else {
// // console.error('Favorites data is not in the expected format', favoritesData);
// }
// // console.log('Favorite added successfully');
// } else {
// // console.warn('Add favorite failed:', result.content);
// }
// } catch (err) {
// // console.error('Error in addFavoriteCallback', err);
// }
// }
// }
// render() {
// this.favorites = this.favorites || [];
// return (
// <Host>
// <div class="fav-cont">
// <div class="kt-subheader__main dina">
// <div class="kt-subheader__breadcrumbs">
// {this.favorites?.length == 0 ? (
// <span class="kt-subheader__breadcrumbs-link no-items">For quick access, place your favorites here on the favorite bar</span>
// ) : (
// this.favorites?.map(fav => (
// <span class="kt-subheader__breadcrumbs-link kt-subheader__breadcrumbs-item" key={fav.pageId}>
// <a class="kt-subheader__breadcrumbs-link">
// {this.isEditMode && this.editingPage?.pageId == fav.pageId ? (
// <input type="text" value={this.editingPage?.name} onInput={e => this.handleInput(e)} />
// ) : (
// <a href={fav.url} target="_self" class="kt-subheader__breadcrumbs-link">
// {fav.name}
// </a>
// )}
// </a>
// {this.isEditMode && (
// <>
// <a class="kt-subheader__breadcrumbs-link" title="Edit" onClick={() => this.handleEdit(fav)}>
// <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 24 24" fill="none">
// <path
// d="M18.3282 8.32837L15.8939 5.89405C14.7058 4.706 14.1118 4.11198 13.4268 3.88941C12.8243 3.69364 12.1752 3.69364 11.5727 3.88941C10.8877 4.11198 10.2937 4.706 9.10564 5.89405L7.49975 7.49994M3 20.9997L3.04745 20.6675C3.21536 19.4922 3.29932 18.9045 3.49029 18.3558C3.65975 17.8689 3.89124 17.4059 4.17906 16.9783C4.50341 16.4963 4.92319 16.0765 5.76274 15.237L17.4107 3.58896C18.1918 2.80791 19.4581 2.80791 20.2392 3.58896C21.0202 4.37001 21.0202 5.63634 20.2392 6.41739L8.37744 18.2791C7.61579 19.0408 7.23497 19.4216 6.8012 19.7244C6.41618 19.9932 6.00093 20.2159 5.56398 20.3879C5.07171 20.5817 4.54375 20.6882 3.48793 20.9012L3 20.9997Z"
// stroke="#000000"
// stroke-width="2"
// stroke-linecap="round"
// stroke-linejoin="round"
// />
// </svg>
// </a>
// <a class="kt-subheader__breadcrumbs-link" title="Remove" onClick={() => this.handleRemoveFavorite(fav.pageId)}>
// <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 24 24" fill="none">
// <path
// d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6"
// stroke="#000000"
// stroke-width="2"
// stroke-linecap="round"
// stroke-linejoin="round"
// ></path>
// </svg>
// </a>
// </>
// )}
// </span>
// ))
// )}
// </div>
// </div>
// <div class="kt-subheader__toolbar">
// <div class="kt-subheader__wrapper">
// {this.favorites?.length === 0 || !this.isFavorite ? (
// <a class="btn btn-icon" title="Add to Favorite">
// <svg
// xmlns="http://www.w3.org/2000/svg"
// width="24px"
// height="24px"
// viewBox="0 0 24 24"
// version="1.1"
// class="kt-svg-icon inactive"
// onClick={() => this.addFavorite()}
// >
// <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
// <polygon points="0 0 24 0 24 24 0 24"></polygon>
// <path
// d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z"
// fill="#000000"
// ></path>
// </g>
// </svg>
// </a>
// ) : (
// <a class="btn btn-icon" title="Favorite">
// <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon" onClick={() => this.addFavorite()}>
// <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
// <polygon points="0 0 24 0 24 24 0 24"></polygon>
// <path
// d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z"
// fill="#000000"
// ></path>
// </g>
// </svg>
// </a>
// )}
// {this.favorites?.length > 0 && (
// <a class="btn btn-icon" title="Edit" onClick={() => this.showEditIcons()}>
// <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
// <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
// <rect x="0" y="0" width="24" height="24"></rect>
// <path
// d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z"
// fill="#000000"
// fill-rule="nonzero"
// transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) "
// ></path>
// <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"></rect>
// </g>
// </svg>
// </a>
// )}
// {/* {this.isEditMode && (
// <a class="btn btn-icon" title="Confirm">
// <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
// <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
// <polygon points="0 0 24 0 24 24 0 24"></polygon>
// <path
// d="M9.26193932,16.6476484 C8.90425297,17.0684559 8.27315905,17.1196257 7.85235158,16.7619393 C7.43154411,16.404253 7.38037434,15.773159 7.73806068,15.3523516 L16.2380607,5.35235158 C16.6013618,4.92493855 17.2451015,4.87991302 17.6643638,5.25259068 L22.1643638,9.25259068 C22.5771466,9.6195087 22.6143273,10.2515811 22.2474093,10.6643638 C21.8804913,11.0771466 21.2484189,11.1143273 20.8356362,10.7474093 L17.0997854,7.42665306 L9.26193932,16.6476484 Z"
// fill="#000000"
// fill-rule="nonzero"
// opacity="0.3"
// transform="translate(14.999995, 11.000002) rotate(-180.000000) translate(-14.999995, -11.000002) "
// ></path>
// <path
// d="M4.26193932,17.6476484 C3.90425297,18.0684559 3.27315905,18.1196257 2.85235158,17.7619393 C2.43154411,17.404253 2.38037434,16.773159 2.73806068,16.3523516 L11.2380607,6.35235158 C11.6013618,5.92493855 12.2451015,5.87991302 12.6643638,6.25259068 L17.1643638,10.2525907 C17.5771466,10.6195087 17.6143273,11.2515811 17.2474093,11.6643638 C16.8804913,12.0771466 16.2484189,12.1143273 15.8356362,11.7474093 L12.0997854,8.42665306 L4.26193932,17.6476484 Z"
// fill="#000000"
// fill-rule="nonzero"
// transform="translate(9.999995, 12.000002) rotate(-180.000000) translate(-9.999995, -12.000002) "
// ></path>
// </g>
// </svg>
// </a>
// )} */}
// </div>
// </div>
// </div>
// </Host>
// );
// }
// }
//# sourceMappingURL=favorite-pages.js.map