\n This is explanatory text for the grid.
\n\n```\n\n##### Footer\n\nThe `footer` slot permit to apply a custom title replacing the default filter on footer. As example:\n\n```html\n\n \n\n```\n\n#### Theming\n\nThis component supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for overriding some default values. So defining the following variables will override default values.\n\n```css\n:root {\n --content-grid-flex-grid-justify: center; // How to justify all flex grid elements, default value is center\n --content-grid-flex-grid-item-margin: 20px auto; // To set a margin on all flex items, default is `20px auto`\n}\n```\n\n### The action favorite\n\nThe component `action-favorite` is really simple, it show a start button that permit to add or remove from favorites a portlet.\n\n#### Html\n\n```html\n\n\n\n\n```\n\n#### Properties\n\n- `messages`: type: `Array of Objects`, see [internationalization](#internationalization)\n- ~~`call-on-toggle-fav`: type: `Function`, default: `{}`, a callback function called after the click event on the button,~~ Deprecated, use `toggle` event instead.\n- `chan-id`: type: `String`, required: `true`, the portlet id to add or remove from user favorites,\n- ~~`favorite-api-url`: type: `String`, default: `/uPortal/api/layout`, the uri/url of the favorites api,~~ Deprecated.\n- ~~`user-info-api-url`: type: `String`, default: `/uPortal/api/v5-1/userinfo`, url/uri on which the api request is done to obtain user information and the jwt token,~~ Deprecated.\n- `fname`: type: `String`, required: `true`, the portlet fname that permit to identify the portlet into favorite's list, usefull for the callback function and apply a css class,\n- `is-favorite`: type: `Boolean`, default: `false`, provide the favorite state,\n- `back-ground-is-dark`: type: `Boolean`, default: `false`, permit to apply a style depending on background color, as the component is used as embedded,\n- ~~`debug`: type: `Boolean`, default: `false`, for the demo/debug mode to be able to run in a standalone way (disable favorites api call)~~ Deprecated\n\n#### Events\n\n##### Emitted\n\n- `toggle`, target : `component`, details: `fname,chanId,isFavorite`, emited when button is clicked.\n\n#### Theming\n\nThis component supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for overriding some default values. So defining the following variables will override default values.\n\n```css\n:root {\n --action-favorites-dark-background-icon-color: #010101; // To set a different color of the favorite svg icon when background is dark.\n --action-favorites-normal-icon-color: red; // To set a different color of the favorite svg icon when background is normal.\n}\n```\n\n### The content favorites\n\nThe component is functional only into the `content-menu`, it needs that a portlet list and favorite list is passed\n\nSomme work would be needed to move on the `content-carousel`.\n\n### The content user\n\nThis component permit to show user information with their organization information.\nFew work would be need to be able to use it as a standalone component: like having a fetch service like for portlets or favorite. But some parts are institutional developpments to be able to obtain organization informations, so we are waiting new usecase before to do something.\n\n#### Html\n\nNeed some work for a standalone use.\n\n#### Properties\n\n- `messages`: type: `Array of Objects`, see [internationalization](#internationalization).\n- `org-display-name`: type: `String`, default: `''`, organization name to display.\n- `org-img-url`: type: `String`, default: `''`, url of the organization image to display.\n- `user-display-name`: type: `String`, default: `''`, user name to display.\n- `user-avatar-url`: type: `String`, default: `''`, url of the user avatar image to display.\n- `switch-org-portlet-url`: type: `String`, default: `''`, an url/uri where the user can switch of organization when having several (tenant use part). Let empty to not show the button.\n- `user-info-portlet-url`: type: `String`, default: `''`, an url/uri to the user information application,\n- ~~`org-info`: type: `Object`, default: `{}`, the current user organization detail object,~~ Deprecated.\n- ~~`other-orgs`: type: `Array`, default: `[]`, all other organizations details object when the user have several,~~ Deprecated.\n- ~~`user-info`: type: `Object`, required: `true`, the user information object,~~ Deprecated.\n- ~~`default-org-logo`: type: `String`, required: `true`, an url/uri to provide an institutional picture when none is found from an optional api (not provided into uPortal),~~ Deprecated.\n- ~~`org-logo-url-attribute-name`: type: `String`, default: `'otherAttributes.ESCOStructureLogo[0]'`, the attribute object path to obtain the organization Picture from organization details obtained from the organization's api.~~\n- ~~`force-org-logo`: type: `String`, optional, an url/uri to provide an institutional picture overriding the default-org-logo and the institutional one obtained by an api (used to have an overview before updating change to every users from the api),~~\n\nand additional properties to work with the parent component `content-menu`:\n\n- `parent-screen-size`: type: possible value `large|medium|small|smaller`, default: `medium`, permit to indicate the breakpoint view of the parent.\n\n### The portlet card\n\nThis component render informations about a portlet as a card.\n\n#### Html\n\n```html\n\n\n\n\n```\n\n#### Properties\n\n- `messages`: type: `Array of Objects`, see [internationalization](#internationalization).\n- `portlet-desc`: type: `Object`, required: `true`, the portlet description object\n- `size`: type: possible value `large|medium|small|smaller|custom`, default: `medium`, the fixed size of card to apply\n- `css-class`: type: `string`, default: `portlet-card`, class name give to the main div of the component\n- `card-hover-src`: type: possible value `none|title|desc|description`, default: `none`, set the hover text for the grid cards to one of the portlet definition values `title` or `description`\n- `hide-action: type`: `Boolean`, default: `false`, define to hide or not the `action-favorite` button\n- `back-ground-is-dark`: type: `Boolean`, default: `false`, permit to apply a style depending on background color, as the component is used as embeded,\n- `is-favorite`: type: `Boolean`, default: `false`, provide the favorite state (passed to the `action-favorite` component),\n- ~~`call-after-action`: type: `Function`, default: `{}`, callback function to call after click on `action-favorite` button (passed to the `action-favorite` component),~~ deprecated, use `toggle-favorite` event instead\n- `icon-background-color`: type: `String`, default: `Transparent`, could be used to apply a background-color behind a portlet icon - usecase if there isn't background on icon.\n- ~~`favorite-api-url`: type: `String`, default: `/uPortal/api/layout`, the uri/url of the favorites api (passed to the `action-favorite` component),~~ deprecated\n- ~~`user-info-api-url`: type: `String`, default: `/uPortal/api/v5-1/userinfo`, url/uri on which the api request is done to obtain user information and the jwt token, (passed to the `action-favorite` component),~~ deprecated\n- `debug`: type: `Boolean`, default: `false`, for the demo/debug mode to be able to run in a standalone way (disable api call).\n\n#### Events\n\n##### Emitted\n\n- `toggle-favorite`, target : `component`, details: `fname,chanId,isFavorite`, emited when `toggle` event of embed `action-favorite` is emitted.\n\n### The content grid category filter\n\nThis component is an external version of the filter built into Content Grid that allows for arbitrary placement on the page.\n\n#### Html\n\n```html\n\n\n\n\n\n\n```\n\n#### Properties\n\n- `categories`,type: `array`,default: `[]`, list of the categories, can be used to preset them\n- `filter-Category`,type: `string`,default: `''`, current selected category, can be used to preset it\n\n#### Events\n\n##### Emited\n\n- `esco-cm-grid-filter`, target : `window`, details: `category`, emited when category is choosen or when `esco-cm-request-grid-filter` event is received.\n- `esco-cm-request-categories`, target : `window`, details: `categories`, emited when categories list is calculated or when `esco-cm-request-categories` event is received.\n\n##### Listened\n\n- `esco-cm-grid-filter`, details: `category,value`, when received, use `detail` to update the selected category.\n- `esco-cm-request-grid-filter`, when received, emit `esco-cm-grid-filter` event with the filter parameters in `detail`.\n- `esco-cm-request-categories`, when received, emit `esco-cm-categories` event with the categories list in `detail`.\n- `esco-cm-categories`, when received, update categories list\n-\n\n### The ellipsis\n\nThis component permit to apply an auto-fit/trunc or a line-clamping to a text when the div size should be limited. It avoids to apply an overflow: hidden and permit to manage an ellipsis on several line.\n\n#### Html\n\n```html\n\n\n\n\n```\n\n#### Properties\n\n- `message`: type: `String`, default: `''`, the text to \"ellipsise\",\n- `line-clamp`: type: `Number`, default: `0`, when we want a number of line, else will apply an auto-fit on the available size (the parent should have a defined height),\n- `line-height`: type: `String`, default: `'22px'`, the line heigth of the text is required for the auto-fit,\n- `end-char`: type: `String`, default: `'...'`, a text to apply when a trunc appear,\n- `end-html`: type: `String`, default: `''`, a text to apply at end of the html.\n\n### The header buttons\n\nThis component render a header part with some main buttons, like closing the page menu or to sign out.\n\n#### Html\n\n```html\n\n\n\n \n```\n\n#### Properties\n\n- `call-on-close`: type: `Function`, default: `{}`, callback function on click on the close button,\n- `sign-out-url`: type: `String`, default: `/uPortal/Logout`, an uri/url to call when user logout (for a logout button),\n\n## FAQ\n\n- Q: What does \"ESCO\" mean?\n- A: \"ESCO\" is an abbreviation of \"e-scolaire\", French for Online School.\n\n### Theming\n\nCurrently this component supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for overriding button colors. Defining the following variables will change the colors for the component accordingly. They will fall back to the colors described below.\n\n**_NOTE:_** This is only supported when the size attribute is set to `custom`.\n\nYou should define this in your custom stylesheet.\n\n```css\n:root {\n --content-gridcard-padding: 5px;\n --content-gridcard-border: none;\n --content-gridcard-bg-color: white;\n --content-gridcard-border-radius: 5px;\n --content-gridcard-shadow: none;\n --content-gridcard-shadow-hover: none;\n --content-gridcard-size-w: 180px;\n --content-gridcard-size-h: 180px;\n --content-gridcard-icon-size: 75px;\n --content-gridcard-icon-size: 75px;\n --content-gridcard-title-fontsize: 16px;\n --content-gridcard-description-fontsize: 16px;\n\n --content-griditem-margin: 20px auto;\n}\n```\n","readmeFilename":"README.md"}