@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
189 lines (188 loc) • 6.42 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
import Helpers from "../../utils/helpers";
/**
* O subcomponente `br-footer-logo` representa a logo principal do site ou a logo dos parceiros.
* Ele deve ser utilizado como filho direto do componente [`br-footer`](/docs/components/footer).
* Para que ele represente a logo principal do site, o atributo `is-partner` deve ser definido como `false`, ou não deve ser definido.
* Para que ele represente a logo de um parceiro, o atributo `is-partner` deve ser definido como `true`.
*/
export class FooterLogo {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId = Helpers.generateUniqueId();
/**
* Url da logo padrão.
*/
src = '';
/**
* Descrição da logo.
*/
description = 'logo';
/**
* Posição da logo.
*/
position = 'left';
/**
* Define se a logo é de um parceiro.
*/
isPartner = false;
/**
* Monta o mapa de classes CSS que serão aplicadas ao componente.
* @returns Objeto com as classes CSS que serão aplicadas ao componente.
*/
getCssClassMap() {
return {
'br-footer-logo': true,
logo: true,
'text-sm-left': this.position === 'left',
'text-sm-center': this.position === 'center',
'text-sm-right': this.position === 'right',
partner: this.isPartner,
};
}
/**
* Monta o mapa de classes CSS que serão aplicadas ao host do componente.
* @returns Objeto com as classes CSS que serão aplicadas ao host do componente.
*/
getRootCssClassMap() {
return {
partner: this.isPartner,
};
}
/**
* Monta o JSX que representa o componente.
* @returns JSX que representa o componente.
*/
render() {
return (h(Host, { key: '1292dfb3fb3c5475b6affcc1e7e81bd64ac83f32', class: this.getRootCssClassMap() }, h("div", { key: 'db5466de9ebfb94ef05e6df97dc448cb0f8f5b47', id: this.customId, class: this.getCssClassMap() }, h("img", { key: '8f54fa228a56beeee4cb9be7b2b76f59f5201213', src: this.src, alt: this.description }))));
}
static get is() { return "br-footer-logo"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["footer-logo.scss"]
};
}
static get styleUrls() {
return {
"$": ["footer-logo.css"]
};
}
static get properties() {
return {
"customId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
},
"getter": false,
"setter": false,
"attribute": "custom-id",
"reflect": true,
"defaultValue": "Helpers.generateUniqueId()"
},
"src": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Url da logo padr\u00E3o."
},
"getter": false,
"setter": false,
"attribute": "src",
"reflect": true,
"defaultValue": "''"
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Descri\u00E7\u00E3o da logo."
},
"getter": false,
"setter": false,
"attribute": "description",
"reflect": true,
"defaultValue": "'logo'"
},
"position": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'left' | 'center' | 'right'",
"resolved": "\"center\" | \"left\" | \"right\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Posi\u00E7\u00E3o da logo."
},
"getter": false,
"setter": false,
"attribute": "position",
"reflect": true,
"defaultValue": "'left'"
},
"isPartner": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define se a logo \u00E9 de um parceiro."
},
"getter": false,
"setter": false,
"attribute": "is-partner",
"reflect": true,
"defaultValue": "false"
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=footer-logo.js.map