@ongov/ontario-design-system-component-library 4.3.0-alpha.1 → 4.3.0-alpha.2
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.
- package/dist/cjs/ontario-accordion_42.cjs.entry.js +1 -1
- package/dist/cjs/ontario-accordion_42.cjs.entry.js.map +1 -1
- package/dist/collection/components/ontario-card-collection/ontario-card-collection.css +15 -0
- package/dist/components/ontario-card-collection.js +1 -1
- package/dist/components/ontario-card-collection.js.map +1 -1
- package/dist/esm/ontario-accordion_42.entry.js +1 -1
- package/dist/esm/ontario-accordion_42.entry.js.map +1 -1
- package/dist/ontario-design-system-components/ontario-design-system-components.esm.js +1 -1
- package/dist/ontario-design-system-components/{p-00364195.entry.js → p-122e8c93.entry.js} +2 -2
- package/dist/ontario-design-system-components/p-122e8c93.entry.js.map +1 -0
- package/package.json +2 -2
- package/src/components/ontario-card-collection/ontario-card-collection.scss +12 -0
- package/www/build/ontario-design-system-components.esm.js +1 -1
- package/www/build/{p-00364195.entry.js → p-122e8c93.entry.js} +2 -2
- package/www/build/p-122e8c93.entry.js.map +1 -0
- package/www/build/{p-a8bba86c.js → p-686e3e3f.js} +1 -1
- package/www/index.html +2 -2
- package/dist/ontario-design-system-components/p-00364195.entry.js.map +0 -1
- package/www/build/p-00364195.entry.js.map +0 -1
|
@@ -24,6 +24,11 @@
|
|
|
24
24
|
margin-right: 0;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
+
@media screen and (max-width: 40em) {
|
|
28
|
+
.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
|
|
29
|
+
width: calc(100% - 0.5rem);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
27
32
|
|
|
28
33
|
.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
|
|
29
34
|
width: calc(33.3% - 1.75rem);
|
|
@@ -31,6 +36,11 @@
|
|
|
31
36
|
.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n) {
|
|
32
37
|
margin-right: 0;
|
|
33
38
|
}
|
|
39
|
+
@media screen and (max-width: 40em) {
|
|
40
|
+
.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
|
|
41
|
+
width: calc(100% - 0.5rem);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
34
44
|
|
|
35
45
|
.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
|
|
36
46
|
width: calc(50% - 1.25rem);
|
|
@@ -38,3 +48,8 @@
|
|
|
38
48
|
.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n) {
|
|
39
49
|
margin-right: 0;
|
|
40
50
|
}
|
|
51
|
+
@media screen and (max-width: 40em) {
|
|
52
|
+
.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
|
|
53
|
+
width: calc(100% - 0.5rem);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
|
|
|
2
2
|
import { C as ConsoleMessageClass } from './console-message.js';
|
|
3
3
|
|
|
4
4
|
const ontarioCardCollectionCss =
|
|
5
|
-
'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}';
|
|
5
|
+
'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}';
|
|
6
6
|
const OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
|
|
7
7
|
|
|
8
8
|
const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,
|
|
1
|
+
{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,wvCAAwvC,CAAC;AAC1xC,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 2rem);\n\n\t&:nth-child(4n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1.25rem);\n\n\t\t&:nth-child(2n) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.75rem);\n\n\t&:nth-child(3n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1.25rem);\n\n\t&:nth-child(2n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n ontario-card-collection__container\n ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1260,7 +1260,7 @@ const OntarioCard = class {
|
|
|
1260
1260
|
OntarioCard.style = OntarioCardStyle0;
|
|
1261
1261
|
|
|
1262
1262
|
const ontarioCardCollectionCss =
|
|
1263
|
-
'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}';
|
|
1263
|
+
'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}';
|
|
1264
1264
|
const OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
|
|
1265
1265
|
|
|
1266
1266
|
const OntarioCardCollection = class {
|