Static Site
This commit is contained in:
36
Static/package/dist/collection/components/card/card-headline/card-headline.css
vendored
Normal file
36
Static/package/dist/collection/components/card/card-headline/card-headline.css
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card__headline-wrapper {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.card__headline-wrapper.withDesc {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-headline {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
font-family: var(--ifx-font-family);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card-headline.isHovered {
|
||||
color: #0A8276;
|
||||
}
|
||||
.card-headline.horizontal {
|
||||
font-size: 1.25rem;
|
||||
line-height: 28px;
|
||||
}
|
||||
21
Static/package/dist/collection/components/card/card-headline/card-headline.e2e.js
vendored
Normal file
21
Static/package/dist/collection/components/card/card-headline/card-headline.e2e.js
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-card-headline', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card-headline></ifx-card-headline>');
|
||||
const element = await page.find('ifx-card-headline');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('should display slotted content', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card-headline>Test content</ifx-card-headline>');
|
||||
const headlineContent = await page.evaluate(() => {
|
||||
const headline = document.querySelector('ifx-card-headline');
|
||||
const slot = headline.shadowRoot.querySelector('slot');
|
||||
const nodes = slot.assignedNodes();
|
||||
return nodes[0].textContent;
|
||||
}).catch(e => console.error(e));
|
||||
expect(headlineContent).toBe('Test content');
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=card-headline.e2e.js.map
|
||||
1
Static/package/dist/collection/components/card/card-headline/card-headline.e2e.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-headline/card-headline.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-headline.e2e.js","sourceRoot":"","sources":["../../../../src/components/card/card-headline/card-headline.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EAEjC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,qDAAqD,CAAC,CAAC;IAE7E,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;MAC7D,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACvD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC/C,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-card-headline', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-headline></ifx-card-headline>');\n\n const element = await page.find('ifx-card-headline');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n\n await page.setContent('<ifx-card-headline>Test content</ifx-card-headline>');\n\n const headlineContent = await page.evaluate(() => {\n const headline = document.querySelector('ifx-card-headline');\n const slot = headline.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n }).catch(e => console.error(e));\n\n expect(headlineContent).toBe('Test content');\n });\n\n});\n"]}
|
||||
67
Static/package/dist/collection/components/card/card-headline/card-headline.js
vendored
Normal file
67
Static/package/dist/collection/components/card/card-headline/card-headline.js
vendored
Normal file
@ -0,0 +1,67 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class CardHeadline {
|
||||
constructor() {
|
||||
this.direction = undefined;
|
||||
this.hasDesc = undefined;
|
||||
this.isHovered = false;
|
||||
}
|
||||
componentWillLoad() {
|
||||
var _a;
|
||||
const cardElement = this.el.closest('ifx-card');
|
||||
if (cardElement) {
|
||||
const cardClass = (_a = cardElement.shadowRoot.querySelector('.card')) === null || _a === void 0 ? void 0 : _a.className;
|
||||
if (cardClass && cardClass.includes('horizontal')) {
|
||||
this.direction = 'horizontal';
|
||||
}
|
||||
const desc = cardElement.querySelector('ifx-card-text');
|
||||
if (desc) {
|
||||
this.hasDesc = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h("div", { class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, h("div", { class: `card-headline ${this.direction} ${this.isHovered ? 'isHovered' : ""}` }, h("slot", null))));
|
||||
}
|
||||
static get is() { return "ifx-card-headline"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["card-headline.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["card-headline.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"isHovered": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "is-hovered",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"direction": {},
|
||||
"hasDesc": {}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
}
|
||||
//# sourceMappingURL=card-headline.js.map
|
||||
1
Static/package/dist/collection/components/card/card-headline/card-headline.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-headline/card-headline.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-headline.js","sourceRoot":"","sources":["../../../../src/components/card/card-headline/card-headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnE,MAAM,OAAO,YAAY;;;;qBAIM,KAAK;;EAElC,iBAAiB;;IACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhD,IAAI,WAAW,EAAE;MACf,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;MAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;QACjD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;OAC9B;MAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACxD,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACrB;KACF;EACH,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MACpE,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;QAChF,eAAQ,CACJ,CACF,CACP,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-headline',\n styleUrl: 'card-headline.scss',\n shadow: true,\n})\n\nexport class CardHeadline {\n @Element() el;\n @State() direction: string;\n @State() hasDesc: boolean;\n @Prop() isHovered: boolean = false;\n\n componentWillLoad() {\n const cardElement = this.el.closest('ifx-card');\n\n if (cardElement) {\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n if (cardClass && cardClass.includes('horizontal')) {\n this.direction = 'horizontal'\n }\n\n const desc = cardElement.querySelector('ifx-card-text');\n if (desc) {\n this.hasDesc = true;\n }\n }\n }\n\n\n render() {\n return (\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n <div class={`card-headline ${this.direction} ${this.isHovered ? 'isHovered' : \"\"}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"]}
|
||||
6
Static/package/dist/collection/components/card/card-image/card-image.css
vendored
Normal file
6
Static/package/dist/collection/components/card/card-image/card-image.css
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: bottom;
|
||||
object-fit: cover;
|
||||
}
|
||||
106
Static/package/dist/collection/components/card/card-image/card-image.js
vendored
Normal file
106
Static/package/dist/collection/components/card/card-image/card-image.js
vendored
Normal file
@ -0,0 +1,106 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class CardImage {
|
||||
constructor() {
|
||||
this.src = undefined;
|
||||
this.alt = undefined;
|
||||
this.position = undefined;
|
||||
}
|
||||
handlePosition(position) {
|
||||
this.imgPosition.emit(position);
|
||||
}
|
||||
componentWillLoad() {
|
||||
this.handlePosition(this.position);
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.handlePosition(this.position);
|
||||
}
|
||||
render() {
|
||||
return (h("img", { src: this.src, alt: this.alt, class: "card-image" }));
|
||||
}
|
||||
static get is() { return "ifx-card-image"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["card-image.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["card-image.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"src": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "src",
|
||||
"reflect": false
|
||||
},
|
||||
"alt": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "alt",
|
||||
"reflect": false
|
||||
},
|
||||
"position": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "position",
|
||||
"reflect": false
|
||||
}
|
||||
};
|
||||
}
|
||||
static get events() {
|
||||
return [{
|
||||
"method": "imgPosition",
|
||||
"name": "imgPosition",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=card-image.js.map
|
||||
1
Static/package/dist/collection/components/card/card-image/card-image.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-image/card-image.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-image.js","sourceRoot":"","sources":["../../../../src/components/card/card-image/card-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,SAAS;;;;;;EAMpB,cAAc,CAAC,QAAQ;IACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACjC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACpC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACpC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,CACzD,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-image',\n styleUrl: 'card-image.scss',\n shadow: true,\n})\n\nexport class CardImage {\n @Prop() src: string;\n @Prop() alt: string;\n @Prop() position: string;\n @Event() imgPosition: EventEmitter;\n\n handlePosition(position) {\n this.imgPosition.emit(position)\n }\n\n componentWillLoad() {\n this.handlePosition(this.position)\n }\n\n componentDidUpdate() {\n this.handlePosition(this.position)\n }\n\n render() {\n return (\n <img src={this.src} alt={this.alt} class=\"card-image\" />\n );\n }\n}\n"]}
|
||||
22
Static/package/dist/collection/components/card/card-links/card-links.css
vendored
Normal file
22
Static/package/dist/collection/components/card/card-links/card-links.css
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
text-decoration: none;
|
||||
color: #1D1D1D;
|
||||
padding: 0px 24px 24px 24px;
|
||||
/* wraps text at spaces and within words */
|
||||
word-wrap: break-word;
|
||||
/* breaks text within a word if necessary */
|
||||
overflow-wrap: anywhere;
|
||||
/* breaks text at arbitrary points when needed */
|
||||
}
|
||||
.container:hover {
|
||||
cursor: initial;
|
||||
}
|
||||
20
Static/package/dist/collection/components/card/card-links/card-links.js
vendored
Normal file
20
Static/package/dist/collection/components/card/card-links/card-links.js
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class CardLinks {
|
||||
render() {
|
||||
return (h("div", { class: 'container' }, h("slot", null)));
|
||||
}
|
||||
static get is() { return "ifx-card-links"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["card-links.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["card-links.css"]
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
}
|
||||
//# sourceMappingURL=card-links.js.map
|
||||
1
Static/package/dist/collection/components/card/card-links/card-links.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-links/card-links.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-links.js","sourceRoot":"","sources":["../../../../src/components/card/card-links/card-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtD,MAAM,OAAO,SAAS;EAGpB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,eAAQ,CACJ,CACP,CAAA;EACH,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-links',\n styleUrl: 'card-links.scss',\n shadow: true,\n})\n\nexport class CardLinks {\n @Element() el;\n\n render() {\n return (\n <div class='container'>\n <slot />\n </div>\n )\n }\n}\n"]}
|
||||
21
Static/package/dist/collection/components/card/card-overline/card-overline.css
vendored
Normal file
21
Static/package/dist/collection/components/card/card-overline/card-overline.css
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-overline {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #575352;
|
||||
padding-bottom: 4px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
21
Static/package/dist/collection/components/card/card-overline/card-overline.e2e.js
vendored
Normal file
21
Static/package/dist/collection/components/card/card-overline/card-overline.e2e.js
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-card-overline', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card-overline></ifx-card-overline>');
|
||||
const element = await page.find('ifx-card-overline');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('should display slotted content', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card-overline>Card Overline</ifx-card-overline>');
|
||||
const cardOverlineText = await page.evaluate(() => {
|
||||
const cardOverline = document.querySelector('ifx-card-overline');
|
||||
const slot = cardOverline.shadowRoot.querySelector('slot');
|
||||
const nodes = slot.assignedNodes();
|
||||
return nodes[0].textContent;
|
||||
});
|
||||
expect(cardOverlineText).toBe('Card Overline');
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=card-overline.e2e.js.map
|
||||
1
Static/package/dist/collection/components/card/card-overline/card-overline.e2e.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-overline/card-overline.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-overline.e2e.js","sourceRoot":"","sources":["../../../../src/components/card/card-overline/card-overline.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EAEjC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,sDAAsD,CAAC,CAAC;IAE9E,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAChD,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;MACjE,MAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;EACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-card-overline', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-overline></ifx-card-overline>');\n\n const element = await page.find('ifx-card-overline');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-overline>Card Overline</ifx-card-overline>');\n\n const cardOverlineText = await page.evaluate(() => {\n const cardOverline = document.querySelector('ifx-card-overline');\n const slot = cardOverline.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(cardOverlineText).toBe('Card Overline');\n });\n});\n"]}
|
||||
19
Static/package/dist/collection/components/card/card-overline/card-overline.js
vendored
Normal file
19
Static/package/dist/collection/components/card/card-overline/card-overline.js
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class CardOverline {
|
||||
render() {
|
||||
return (h("div", { class: "card-overline" }, h("slot", null)));
|
||||
}
|
||||
static get is() { return "ifx-card-overline"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["card-overline.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["card-overline.css"]
|
||||
};
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=card-overline.js.map
|
||||
1
Static/package/dist/collection/components/card/card-overline/card-overline.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-overline/card-overline.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-overline.js","sourceRoot":"","sources":["../../../../src/components/card/card-overline/card-overline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,YAAY;EAEvB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;MACxB,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-overline',\n styleUrl: 'card-overline.scss',\n shadow: true,\n})\n\nexport class CardOverline {\n\n render() {\n return (\n <div class=\"card-overline\">\n <slot />\n </div>\n );\n }\n}\n"]}
|
||||
27
Static/package/dist/collection/components/card/card-text/card-text.css
vendored
Normal file
27
Static/package/dist/collection/components/card/card-text/card-text.css
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card__text-wrapper {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.card__text-wrapper.hasBtn {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
line-height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
white-space: wrap;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
35
Static/package/dist/collection/components/card/card-text/card-text.js
vendored
Normal file
35
Static/package/dist/collection/components/card/card-text/card-text.js
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class CardText {
|
||||
constructor() {
|
||||
this.hasBtn = undefined;
|
||||
}
|
||||
componentWillLoad() {
|
||||
const link = this.el.closest('ifx-card').querySelector('ifx-link');
|
||||
const button = this.el.closest('ifx-card').querySelector('ifx-button');
|
||||
if (link || button) {
|
||||
this.hasBtn = true;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h("div", { class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, h("div", { class: `card-text` }, h("slot", null))));
|
||||
}
|
||||
static get is() { return "ifx-card-text"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["./card-text.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["card-text.css"]
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"hasBtn": {}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
}
|
||||
//# sourceMappingURL=card-text.js.map
|
||||
1
Static/package/dist/collection/components/card/card-text/card-text.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card-text/card-text.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card-text.js","sourceRoot":"","sources":["../../../../src/components/card/card-text/card-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,QAAQ;;;;EAInB,iBAAiB;IACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACvE,IAAG,IAAI,IAAI,MAAM,EAAE;MACjB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;MAC7D,WAAK,KAAK,EAAE,WAAW;QACrB,eAAQ,CACJ,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-text',\n styleUrl: './card-text.scss',\n shadow: true,\n})\n\nexport class CardText {\n @Element() el;\n @State() hasBtn: boolean;\n\n componentWillLoad() { \n const link = this.el.closest('ifx-card').querySelector('ifx-link');\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\n if(link || button) { \n this.hasBtn = true;\n }\n }\n\n render() {\n return (\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n <div class={`card-text`}>\n <slot />\n </div>\n </div>\n );\n }\n}\n"]}
|
||||
105
Static/package/dist/collection/components/card/card.css
vendored
Normal file
105
Static/package/dist/collection/components/card/card.css
vendored
Normal file
@ -0,0 +1,105 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
background-color: #FFFFFF;
|
||||
background-clip: border-box;
|
||||
border: 1px solid #EEEDED;
|
||||
border-radius: 1px;
|
||||
width: 350px;
|
||||
height: auto;
|
||||
font-family: var(--ifx-font-family);
|
||||
}
|
||||
.card.linkHovered {
|
||||
border-color: #EEEDED;
|
||||
}
|
||||
.card.cardHovered {
|
||||
border-color: #0A8276;
|
||||
}
|
||||
.card.noBtns .vertical .lower__body-wrapper {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.card.noBtns .horizontal .lower__body-wrapper {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.card .horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: 218px;
|
||||
}
|
||||
.card .horizontal .card-img {
|
||||
flex: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.card .horizontal .card-img.noImage {
|
||||
display: none;
|
||||
}
|
||||
.card .horizontal .card-img ::slotted([slot=img]) {
|
||||
width: 100%;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.card .horizontal .lower__body-wrapper {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
}
|
||||
.card .horizontal .lower__body-wrapper .upper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: #1D1D1D;
|
||||
padding: 24px 24px 0px 24px;
|
||||
}
|
||||
.card .vertical .upper__body-wrapper {
|
||||
text-decoration: none;
|
||||
color: #1D1D1D;
|
||||
}
|
||||
.card .vertical .upper__body-wrapper .card-img {
|
||||
height: 190px;
|
||||
}
|
||||
.card .vertical .upper__body-wrapper .card-img.noImage {
|
||||
display: none;
|
||||
}
|
||||
.card .vertical .upper__body-wrapper .upper-body {
|
||||
padding: 24px 24px 0px 24px;
|
||||
}
|
||||
.card .vertical .lower__body-wrapper:hover {
|
||||
border-color: #EEEDED;
|
||||
}
|
||||
.card.horizontal {
|
||||
flex-direction: row;
|
||||
width: 538px;
|
||||
}
|
||||
.card.horizontal .card-img {
|
||||
flex: 1;
|
||||
order: 2;
|
||||
}
|
||||
.card.horizontal .card-img ::slotted([slot=img]) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: bottom;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card.horizontal.left .horizontal .card-img {
|
||||
order: 1;
|
||||
}
|
||||
.card.horizontal.left .horizontal .lower__body-wrapper {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.card:focus,
|
||||
.card:focus-visible,
|
||||
.focus {
|
||||
outline: none;
|
||||
border-color: #0A8276 !important;
|
||||
}
|
||||
24
Static/package/dist/collection/components/card/card.e2e.js
vendored
Normal file
24
Static/package/dist/collection/components/card/card.e2e.js
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-card', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card></ifx-card>');
|
||||
const element = await page.find('ifx-card');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('should set correct direction', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card direction="horizontal"></ifx-card>');
|
||||
const element = await page.find('ifx-card');
|
||||
const direction = await element.getProperty('direction');
|
||||
expect(direction).toBe('horizontal');
|
||||
});
|
||||
it('should set correct alignment', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-card-image position="left"></ifx-card-image>');
|
||||
const element = await page.find('ifx-card-image');
|
||||
const alignment = await element.getProperty('position');
|
||||
expect(alignment).toBe('left');
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=card.e2e.js.map
|
||||
1
Static/package/dist/collection/components/card/card.e2e.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"card.e2e.js","sourceRoot":"","sources":["../../../src/components/card/card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAExB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,8CAA8C,CAAC,CAAC;IAEtE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzD,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACvC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mDAAmD,CAAC,CAAC;IAE3E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExD,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACjC,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-card', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card></ifx-card>');\n\n const element = await page.find('ifx-card');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should set correct direction', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card direction=\"horizontal\"></ifx-card>');\n\n const element = await page.find('ifx-card');\n const direction = await element.getProperty('direction');\n\n expect(direction).toBe('horizontal');\n });\n\n it('should set correct alignment', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-image position=\"left\"></ifx-card-image>');\n\n const element = await page.find('ifx-card-image');\n const alignment = await element.getProperty('position');\n\n expect(alignment).toBe('left');\n });\n\n});\n"]}
|
||||
188
Static/package/dist/collection/components/card/card.js
vendored
Normal file
188
Static/package/dist/collection/components/card/card.js
vendored
Normal file
@ -0,0 +1,188 @@
|
||||
import { h, Host } from "@stencil/core";
|
||||
export class Card {
|
||||
constructor() {
|
||||
this.noBtns = undefined;
|
||||
this.direction = 'vertical';
|
||||
this.alignment = undefined;
|
||||
this.noImg = undefined;
|
||||
this.href = "";
|
||||
this.internalHref = "";
|
||||
this.target = "_self";
|
||||
}
|
||||
setImgPosition(event) {
|
||||
this.alignment = event.detail;
|
||||
}
|
||||
handleComponentAdjustment() {
|
||||
const image = this.el.querySelector('ifx-card-image');
|
||||
const links = this.el.querySelector('ifx-card-links');
|
||||
if (!image) {
|
||||
this.noImg = true;
|
||||
}
|
||||
else
|
||||
this.noImg = false;
|
||||
if (!links) {
|
||||
this.noBtns = true;
|
||||
}
|
||||
else
|
||||
this.noBtns = false;
|
||||
if (this.href.trim() === "") {
|
||||
this.internalHref = undefined;
|
||||
}
|
||||
else
|
||||
this.internalHref = this.href;
|
||||
}
|
||||
handleClassList(el, type, className) {
|
||||
el.classList[type](className);
|
||||
}
|
||||
handleHovering() {
|
||||
const card = this.el.shadowRoot.querySelector('.card');
|
||||
let cardHeadline = this.el.querySelector('ifx-card-headline');
|
||||
if (this.href) {
|
||||
card.addEventListener('mouseover', (ev) => {
|
||||
// const target = ev.target;
|
||||
// const relatedTarget = ev.relatedTarget;
|
||||
// if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
|
||||
// this.handleClassList(card, 'add', 'borderHovered')
|
||||
// }
|
||||
if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
|
||||
this.handleClassList(card, 'add', 'linkHovered');
|
||||
}
|
||||
else {
|
||||
this.handleClassList(card, 'add', 'cardHovered');
|
||||
if (cardHeadline) {
|
||||
cardHeadline.isHovered = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
card.addEventListener('mouseout', () => {
|
||||
if (cardHeadline) {
|
||||
cardHeadline.isHovered = false;
|
||||
}
|
||||
//this.handleClassList(card, 'remove', 'borderHovered')
|
||||
this.handleClassList(card, 'remove', 'cardHovered');
|
||||
this.handleClassList(card, 'add', 'linkHovered');
|
||||
});
|
||||
}
|
||||
}
|
||||
componentWillLoad() {
|
||||
this.handleComponentAdjustment();
|
||||
}
|
||||
componentDidLoad() {
|
||||
this.handleHovering();
|
||||
this.addEventListenersToHandleCustomFocusState();
|
||||
}
|
||||
addEventListenersToHandleCustomFocusState() {
|
||||
const element = this.el.shadowRoot;
|
||||
if (!element) {
|
||||
console.error('element not found');
|
||||
return;
|
||||
}
|
||||
const upperBodyWrapper = element.querySelector('.upper__body-wrapper');
|
||||
if (!upperBodyWrapper) {
|
||||
console.error('upper body wrapper not found');
|
||||
return;
|
||||
}
|
||||
element.tabIndex = -1;
|
||||
upperBodyWrapper.tabIndex = -1;
|
||||
}
|
||||
componentWillUpdate() {
|
||||
this.handleComponentAdjustment();
|
||||
}
|
||||
render() {
|
||||
return (h(Host, null, h("div", { "aria-labelledby": "label", class: `card
|
||||
${this.noBtns ? 'noBtns' : ""}
|
||||
${this.direction}
|
||||
${this.alignment}` }, this.direction === 'horizontal' &&
|
||||
h("div", { class: "horizontal" }, h("a", { class: `card-img ${this.noImg ? 'noImage' : ""}`, href: this.internalHref }, h("slot", { name: "img" })), h("div", { class: 'lower__body-wrapper' }, h("a", { class: 'upper-body', href: this.internalHref }, h("slot", null)), h("div", null, h("slot", { name: 'buttons' })))), this.direction === 'vertical' &&
|
||||
h("div", { class: "vertical" }, h("a", { class: 'upper__body-wrapper', href: this.internalHref, target: this.target }, h("div", { class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { name: "img" })), h("div", { class: 'upper-body' }, h("slot", null))), h("div", { class: 'lower__body-wrapper' }, h("slot", { name: 'buttons' }))))));
|
||||
}
|
||||
static get is() { return "ifx-card"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["card.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["card.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"direction": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'horizontal' | 'vertical'",
|
||||
"resolved": "\"horizontal\" | \"vertical\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "direction",
|
||||
"reflect": false,
|
||||
"defaultValue": "'vertical'"
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "href",
|
||||
"reflect": false,
|
||||
"defaultValue": "\"\""
|
||||
},
|
||||
"target": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "target",
|
||||
"reflect": false,
|
||||
"defaultValue": "\"_self\""
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"noBtns": {},
|
||||
"alignment": {},
|
||||
"noImg": {},
|
||||
"internalHref": {}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get listeners() {
|
||||
return [{
|
||||
"name": "imgPosition",
|
||||
"method": "setImgPosition",
|
||||
"target": undefined,
|
||||
"capture": false,
|
||||
"passive": false
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=card.js.map
|
||||
1
Static/package/dist/collection/components/card/card.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
118
Static/package/dist/collection/components/card/card.stories.js
vendored
Normal file
118
Static/package/dist/collection/components/card/card.stories.js
vendored
Normal file
@ -0,0 +1,118 @@
|
||||
export default {
|
||||
title: "Components/Card",
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
direction: 'vertical',
|
||||
overline: "Overline",
|
||||
headline: "Headline",
|
||||
description: "Some quick example text to build on the card title and make up the bulk of the card's content.",
|
||||
button: 'button',
|
||||
href: "",
|
||||
target: '_blank',
|
||||
position: 'right',
|
||||
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
|
||||
},
|
||||
argTypes: {
|
||||
button: {
|
||||
options: ['button', 'link', 'none'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
direction: {
|
||||
options: ['horizontal', 'vertical'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
position: {
|
||||
options: ['left', 'right'],
|
||||
control: { type: 'radio' },
|
||||
if: { arg: 'direction', eq: 'horizontal' }
|
||||
},
|
||||
target: {
|
||||
options: ['_blank', '_self', '_parent'],
|
||||
control: { type: 'radio' }
|
||||
}
|
||||
}
|
||||
};
|
||||
const DefaultTemplate = (args) => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
|
||||
<ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
|
||||
${args.overline
|
||||
? `<ifx-card-overline>
|
||||
${args.overline}
|
||||
</ifx-card-overline>`
|
||||
: ""}
|
||||
${args.headline
|
||||
? `<ifx-card-headline>
|
||||
${args.headline}
|
||||
</ifx-card-headline>`
|
||||
: ""}
|
||||
${args.description
|
||||
? `<ifx-card-text>
|
||||
${args.description}
|
||||
</ifx-card-text>` : ""}
|
||||
${args.button === 'button'
|
||||
? `<ifx-card-links slot="buttons">
|
||||
<ifx-button variant="primary">Button</ifx-button>
|
||||
<ifx-button variant="secondary">Button</ifx-button>
|
||||
</ifx-card-links>` : ""}
|
||||
${args.button === 'link'
|
||||
? `<ifx-card-links slot="buttons">
|
||||
<ifx-link href="https://google.com" target="_blank">
|
||||
<ifx-icon icon="calendar16"></ifx-icon>
|
||||
Link
|
||||
</ifx-link>
|
||||
<ifx-link href="https://yahoo.com" target="_blank">
|
||||
<ifx-icon icon="calendar16"></ifx-icon>
|
||||
Link
|
||||
</ifx-link>
|
||||
</ifx-card-links>` : ""}
|
||||
</ifx-card>`;
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
Default.args = {
|
||||
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
|
||||
};
|
||||
const HorizontalTemplate = (args) => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
|
||||
<ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
|
||||
${args.overline
|
||||
? `<ifx-card-overline>
|
||||
${args.overline}
|
||||
</ifx-card-overline>`
|
||||
: ""}
|
||||
${args.headline
|
||||
? `<ifx-card-headline>
|
||||
${args.headline}
|
||||
</ifx-card-headline>`
|
||||
: ""}
|
||||
${args.description
|
||||
? `<ifx-card-text>
|
||||
${args.description}
|
||||
</ifx-card-text>`
|
||||
: ""}
|
||||
${args.button === 'button'
|
||||
? `<ifx-card-links slot="buttons">
|
||||
<ifx-button variant="primary">Button</ifx-button>
|
||||
<ifx-button variant="secondary">Button</ifx-button>
|
||||
</ifx-card-links>` : ""}
|
||||
${args.button === 'link'
|
||||
? `<ifx-card-links slot="buttons">
|
||||
<ifx-link color="primary" href="https://google.com" target="_blank" underline="false">
|
||||
<ifx-icon icon="calendar16"></ifx-icon>
|
||||
Link
|
||||
</ifx-link>
|
||||
<ifx-link color="primary" href="https://yahoo.com" target="_blank" underline="false">
|
||||
<ifx-icon icon="calendar16"></ifx-icon>
|
||||
Link
|
||||
</ifx-link>
|
||||
</ifx-card-links>` : ""}
|
||||
</ifx-card>`;
|
||||
export const Horizontal = HorizontalTemplate.bind({});
|
||||
Horizontal.args = {
|
||||
direction: 'horizontal',
|
||||
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
|
||||
};
|
||||
Horizontal.argTypes = {
|
||||
direction: {
|
||||
table: {
|
||||
disable: true
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=card.stories.js.map
|
||||
1
Static/package/dist/collection/components/card/card.stories.js.map
vendored
Normal file
1
Static/package/dist/collection/components/card/card.stories.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user