@ukic/web-components 2.31.0 → 2.32.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/ic-button_3.cjs.entry.js +5 -1
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +1 -4
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +25 -2
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +5 -5
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +18 -12
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +13 -9
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +16 -0
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.js +5 -1
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css +4 -0
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +9 -7
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +26 -3
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +22 -9
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +18 -12
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js +110 -3
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.js +13 -9
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +17 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/components/helpers.js +1 -1
- package/dist/components/ic-button2.js +5 -1
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +2 -2
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-menu-item2.js +1 -4
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-navigation-item.js +26 -3
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-popover-menu.js +5 -5
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-side-navigation.js +19 -13
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-text-field2.js +14 -10
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-toggle-button.js +17 -1
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-top-navigation.js +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/{p-f1b210ed.entry.js → p-0677ee1e.entry.js} +2 -2
- package/dist/core/p-0677ee1e.entry.js.map +1 -0
- package/dist/core/p-0a20131b.entry.js +2 -0
- package/dist/core/p-0a20131b.entry.js.map +1 -0
- package/dist/core/{p-7e739287.entry.js → p-4ef14601.entry.js} +2 -2
- package/dist/core/p-4ef14601.entry.js.map +1 -0
- package/dist/core/p-5fad22f1.entry.js +2 -0
- package/dist/core/p-5fad22f1.entry.js.map +1 -0
- package/dist/core/{p-32fa7c28.entry.js → p-9feec47e.entry.js} +2 -2
- package/dist/core/p-9feec47e.entry.js.map +1 -0
- package/dist/core/{p-1d648b98.entry.js → p-c1a74ee4.entry.js} +2 -2
- package/dist/core/p-c1a74ee4.entry.js.map +1 -0
- package/dist/core/p-cd61c238.entry.js +2 -0
- package/dist/core/p-cd61c238.entry.js.map +1 -0
- package/dist/core/{p-e7fa6804.entry.js → p-e1def80b.entry.js} +2 -2
- package/dist/core/p-e1def80b.entry.js.map +1 -0
- package/dist/esm/ic-button_3.entry.js +5 -1
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +2 -2
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-menu-item.entry.js +1 -4
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +26 -3
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +5 -5
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +19 -13
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +14 -10
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +17 -1
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +1 -4
- package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +2 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +3 -6
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +1 -0
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +3 -0
- package/dist/types/components.d.ts +4 -7
- package/hydrate/index.js +81 -35
- package/package.json +2 -2
- package/dist/core/p-1d648b98.entry.js.map +0 -1
- package/dist/core/p-32fa7c28.entry.js.map +0 -1
- package/dist/core/p-7e739287.entry.js.map +0 -1
- package/dist/core/p-94d5aa77.entry.js +0 -2
- package/dist/core/p-94d5aa77.entry.js.map +0 -1
- package/dist/core/p-9930557b.entry.js +0 -2
- package/dist/core/p-9930557b.entry.js.map +0 -1
- package/dist/core/p-e6bad80b.entry.js +0 -2
- package/dist/core/p-e6bad80b.entry.js.map +0 -1
- package/dist/core/p-e7fa6804.entry.js.map +0 -1
- package/dist/core/p-f1b210ed.entry.js.map +0 -1
@@ -4,6 +4,7 @@ import { Button } from "../../../ic-button/ic-button";
|
|
4
4
|
import { NavigationGroup } from "../../../ic-navigation-group/ic-navigation-group";
|
5
5
|
import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
|
6
6
|
import { SideNavigation } from "../../ic-side-navigation";
|
7
|
+
import { Typography } from "../../../ic-typography/ic-typography";
|
7
8
|
describe("ic-side-navigation", () => {
|
8
9
|
it("should render with app-title", async () => {
|
9
10
|
const page = await newSpecPage({
|
@@ -146,7 +147,7 @@ describe("ic-side-navigation", () => {
|
|
146
147
|
});
|
147
148
|
expect(page.root).toMatchSnapshot("slotted-navigation-item-collapsed-icon-labels");
|
148
149
|
expect(page.rootInstance.menuExpanded).toBe(false);
|
149
|
-
await page.rootInstance.toggleMenuExpanded();
|
150
|
+
await page.rootInstance.toggleMenuExpanded(true);
|
150
151
|
await page.waitForChanges();
|
151
152
|
await new Promise((r) => setTimeout(r, 2000));
|
152
153
|
expect(page.rootInstance.menuExpanded).toBe(true);
|
@@ -182,7 +183,7 @@ describe("ic-side-navigation", () => {
|
|
182
183
|
</ic-side-navigation>`,
|
183
184
|
});
|
184
185
|
expect(page.rootInstance.menuExpanded).toBe(false);
|
185
|
-
await page.rootInstance.toggleMenuExpanded();
|
186
|
+
await page.rootInstance.toggleMenuExpanded(true);
|
186
187
|
await page.waitForChanges();
|
187
188
|
await new Promise((r) => setTimeout(r, 2000));
|
188
189
|
expect(page.rootInstance.menuExpanded).toBe(true);
|
@@ -267,6 +268,112 @@ describe("ic-side-navigation", () => {
|
|
267
268
|
await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
|
268
269
|
expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);
|
269
270
|
});
|
271
|
+
it("should render with unnamed slots", async () => {
|
272
|
+
const page = await newSpecPage({
|
273
|
+
components: [SideNavigation, NavigationItem],
|
274
|
+
html: `
|
275
|
+
<div style="display:flex; height: 100%;">
|
276
|
+
<ic-side-navigation
|
277
|
+
app-title="Application Name"
|
278
|
+
version="v0.0.0"
|
279
|
+
status="BETA"
|
280
|
+
>
|
281
|
+
<svg
|
282
|
+
slot="app-icon"
|
283
|
+
xmlns="http://www.w3.org/2000/svg"
|
284
|
+
height="24px"
|
285
|
+
viewBox="0 0 24 24"
|
286
|
+
width="24px"
|
287
|
+
fill="#000000"
|
288
|
+
>
|
289
|
+
<path d="M0 0h24v24H0V0z" fill="none" />
|
290
|
+
<path
|
291
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
|
292
|
+
/>
|
293
|
+
</svg>
|
294
|
+
<ic-navigation-item slot="primary-navigation">
|
295
|
+
<a class="active" href="/child-item-2" aria-label="Daily Tippers">
|
296
|
+
<svg
|
297
|
+
slot="icon"
|
298
|
+
width="24"
|
299
|
+
height="24"
|
300
|
+
viewBox="0 0 24 24"
|
301
|
+
fill="none"
|
302
|
+
xmlns="http://www.w3.org/2000/svg"
|
303
|
+
>
|
304
|
+
<path
|
305
|
+
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
|
306
|
+
fill="currentColor"
|
307
|
+
></path>
|
308
|
+
</svg>
|
309
|
+
Daily Tippers
|
310
|
+
</a>
|
311
|
+
</ic-navigation-item>
|
312
|
+
<ic-navigation-group
|
313
|
+
slot="primary-navigation"
|
314
|
+
label="Second navigation group"
|
315
|
+
expandable="true"
|
316
|
+
>
|
317
|
+
<ic-navigation-item>
|
318
|
+
<a href="/child-item-2" aria-label="Daily Tippers">
|
319
|
+
<svg
|
320
|
+
slot="icon"
|
321
|
+
width="24"
|
322
|
+
height="24"
|
323
|
+
viewBox="0 0 24 24"
|
324
|
+
fill="none"
|
325
|
+
xmlns="http://www.w3.org/2000/svg"
|
326
|
+
>
|
327
|
+
<path
|
328
|
+
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
|
329
|
+
fill="currentColor"
|
330
|
+
></path>
|
331
|
+
</svg>
|
332
|
+
Daily Tippers
|
333
|
+
</a>
|
334
|
+
</ic-navigation-item>
|
335
|
+
</ic-navigation-group>
|
336
|
+
</ic-side-navigation>
|
337
|
+
<div
|
338
|
+
class="content-wrapper"
|
339
|
+
style="display:flex; flex-direction: column; flex-grow: 1;"
|
340
|
+
>
|
341
|
+
<main>This is the content</main>
|
342
|
+
<footer>Footer</footer>
|
343
|
+
</div>
|
344
|
+
</div>`,
|
345
|
+
});
|
346
|
+
expect(page.root).toMatchSnapshot("renders-with-unnamed-slots");
|
347
|
+
});
|
348
|
+
it("should render with short app title", async () => {
|
349
|
+
const page = await newSpecPage({
|
350
|
+
components: [SideNavigation, NavigationItem],
|
351
|
+
html: `<ic-side-navigation short-app-title="ABCD" version="v0.0.0" app-title="Very Very Long Title" status="BETA">
|
352
|
+
<ic-navigation-item slot="primary-navigation" href="/" label="Home">
|
353
|
+
</ic-navigation-item>
|
354
|
+
</ic-side-navigation>`,
|
355
|
+
});
|
356
|
+
await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
|
357
|
+
expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
|
358
|
+
expect(page.rootInstance.menuOpen).toBe(false);
|
359
|
+
await page.rootInstance.toggleMenu();
|
360
|
+
await page.waitForChanges();
|
361
|
+
expect(page.root).toMatchSnapshot("renders-with-short-app-title");
|
362
|
+
});
|
363
|
+
it("should render with slotted title", async () => {
|
364
|
+
const page = await newSpecPage({
|
365
|
+
components: [SideNavigation, NavigationItem, Typography],
|
366
|
+
html: `<ic-side-navigation version="v0.0.0" status="BETA">
|
367
|
+
<ic-typography slot="app-title">App title</ic-typography>
|
368
|
+
<ic-navigation-item slot="primary-navigation" href="/" label="Home">
|
369
|
+
</ic-navigation-item>
|
370
|
+
</ic-side-navigation>`,
|
371
|
+
});
|
372
|
+
expect(page.rootInstance.menuOpen).toBe(false);
|
373
|
+
await page.rootInstance.toggleMenu();
|
374
|
+
await page.waitForChanges();
|
375
|
+
expect(page.root).toMatchSnapshot("renders-with-slotted-app-title");
|
376
|
+
});
|
270
377
|
it("should test menu toggle", async () => {
|
271
378
|
const page = await newSpecPage({
|
272
379
|
components: [SideNavigation, NavigationItem, Button],
|
@@ -378,7 +485,7 @@ describe("ic-side-navigation", () => {
|
|
378
485
|
`,
|
379
486
|
});
|
380
487
|
expect(page.rootInstance.menuExpanded).toBe(false);
|
381
|
-
await page.rootInstance.toggleMenuExpanded();
|
488
|
+
await page.rootInstance.toggleMenuExpanded(true);
|
382
489
|
await new Promise((r) => setTimeout(r, 2000));
|
383
490
|
page.root.dispatchEvent(new window.window.Event("transitionend", {
|
384
491
|
bubbles: true,
|
package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ic-side-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-side-navigation/test/basic/ic-side-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationGroup } from \"../../../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"../../ic-side-navigation\";\n\ndescribe(\"ic-side-navigation\", () => {\n it(\"should render with app-title\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation app-title=\"ACME\"></ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n });\n\n it(\"should render with app title, version and status\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" status=\"BETA\"></ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-app-title-version-status\");\n });\n\n it(\"should render with primary navigation items\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-primary-navigation-items\");\n });\n\n it(\"should render with secondary navigation items\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-secondary-navigation-items\"\n );\n });\n\n it(\"should render with slotted navigation item\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\"slotted-navigation-item\");\n });\n\n it(\"should render with slotted navigation item - collapsed icon labels true\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"true\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"slotted-navigation-item-collapsed-icon-labels\"\n );\n\n expect(page.rootInstance.menuExpanded).toBe(false);\n await page.rootInstance.toggleMenuExpanded();\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.rootInstance.menuExpanded).toBe(true);\n expect(page.root).toMatchSnapshot(\n \"slotted-navigation-item-collapsed-icon-labels-menu-toggle\"\n );\n });\n\n it(\"should test menu toggle slotted nav items - collapsed icon labels false\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.rootInstance.menuExpanded).toBe(false);\n await page.rootInstance.toggleMenuExpanded();\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.rootInstance.menuExpanded).toBe(true);\n });\n\n it(\"should set navigation item width to 320px when expanded\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n page.rootInstance.menuExpanded = true;\n await page.rootInstance.toggleMenuExpanded();\n\n expect(\n (\n page.rootInstance.el as HTMLIcSideNavigationElement\n ).style.getPropertyValue(\"--navigation-item-width\")\n ).toBe(\"320px\");\n });\n\n it(\"should render expanded\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" expanded=\"true\"></ic-side-navigation>`,\n });\n\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.root).toMatchSnapshot(\"renders-expanded\");\n });\n\n it(\"should render with primary navigation items and collapsed icon labels\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\n \"primary-navigation-items-and-collapsed-icon-labels\"\n );\n });\n\n it(\"should test resizing\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n });\n\n it(\"should test menu toggle\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem, Button],\n html: `<ic-side-navigation app-title=\"ACME\" version=\"v0.0.0\" status=\"BETA\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item></ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n await page.waitForChanges();\n expect(page.rootInstance.menuOpen).toBe(false);\n await page.rootInstance.toggleMenu();\n await page.waitForChanges();\n expect(page.rootInstance.menuOpen).toBe(true);\n await page.rootInstance.toggleMenu();\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.rootInstance.menuOpen).toBe(false);\n });\n\n it(\"should test resizing - collapsed icon labels false\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"false\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n });\n\n it(\"should test transitionend event\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.rootInstance.menuExpanded).toBe(false);\n await page.rootInstance.toggleMenuExpanded();\n await new Promise((r) => setTimeout(r, 2000));\n\n page.root.dispatchEvent(\n new window.window.Event(\"transitionend\", {\n bubbles: true,\n cancelable: true,\n })\n );\n\n await page.waitForChanges();\n expect(page.rootInstance.menuExpanded).toBe(true);\n });\n\n it(\"should test theme change\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n await page.waitForChanges();\n expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n await page.waitForChanges();\n expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n\n // test disconnected callback\n page.setContent(\"\");\n });\n\n it(\"should render with slotted primary secondary navigation and expanded\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem, NavigationGroup],\n html: `<ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\" expanded=\"true\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n <ic-navigation-group\n slot=\"primary-navigation\"\n label=\"Second navigation group\"\n expandable=\"true\"\n >\n <ic-navigation-item>\n <a\n slot=\"navigation-item\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-navigation-group>\n <ic-navigation-item slot=\"secondary-navigation\">\n <a\n slot=\"navigation-item\"\n href=\"/bar\"\n aria-label=\"bar\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n bar\n </a>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-slotted-primary-secondary-navigation-and-expanded\"\n );\n });\n});\n"]}
|
1
|
+
{"version":3,"file":"ic-side-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-side-navigation/test/basic/ic-side-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationGroup } from \"../../../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"../../ic-side-navigation\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\ndescribe(\"ic-side-navigation\", () => {\n it(\"should render with app-title\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation app-title=\"ACME\"></ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n });\n\n it(\"should render with app title, version and status\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" status=\"BETA\"></ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-app-title-version-status\");\n });\n\n it(\"should render with primary navigation items\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-primary-navigation-items\");\n });\n\n it(\"should render with secondary navigation items\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-secondary-navigation-items\"\n );\n });\n\n it(\"should render with slotted navigation item\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\"slotted-navigation-item\");\n });\n\n it(\"should render with slotted navigation item - collapsed icon labels true\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"true\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"slotted-navigation-item-collapsed-icon-labels\"\n );\n\n expect(page.rootInstance.menuExpanded).toBe(false);\n await page.rootInstance.toggleMenuExpanded(true);\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.rootInstance.menuExpanded).toBe(true);\n expect(page.root).toMatchSnapshot(\n \"slotted-navigation-item-collapsed-icon-labels-menu-toggle\"\n );\n });\n\n it(\"should test menu toggle slotted nav items - collapsed icon labels false\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.rootInstance.menuExpanded).toBe(false);\n await page.rootInstance.toggleMenuExpanded(true);\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.rootInstance.menuExpanded).toBe(true);\n });\n\n it(\"should set navigation item width to 320px when expanded\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n page.rootInstance.menuExpanded = true;\n await page.rootInstance.toggleMenuExpanded();\n\n expect(\n (\n page.rootInstance.el as HTMLIcSideNavigationElement\n ).style.getPropertyValue(\"--navigation-item-width\")\n ).toBe(\"320px\");\n });\n\n it(\"should render expanded\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation app-title=\"ACME\" expanded=\"true\"></ic-side-navigation>`,\n });\n\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.root).toMatchSnapshot(\"renders-expanded\");\n });\n\n it(\"should render with primary navigation items and collapsed icon labels\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\n \"primary-navigation-items-and-collapsed-icon-labels\"\n );\n });\n\n it(\"should test resizing\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n });\n\n it(\"should render with unnamed slots\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <div style=\"display:flex; height: 100%;\">\n <ic-side-navigation\n app-title=\"Application Name\"\n version=\"v0.0.0\"\n status=\"BETA\"\n >\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-navigation-item slot=\"primary-navigation\">\n <a class=\"active\" href=\"/child-item-2\" aria-label=\"Daily Tippers\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n <ic-navigation-group\n slot=\"primary-navigation\"\n label=\"Second navigation group\"\n expandable=\"true\"\n >\n <ic-navigation-item>\n <a href=\"/child-item-2\" aria-label=\"Daily Tippers\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-navigation-group>\n </ic-side-navigation>\n <div\n class=\"content-wrapper\"\n style=\"display:flex; flex-direction: column; flex-grow: 1;\"\n >\n <main>This is the content</main>\n <footer>Footer</footer>\n </div>\n </div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"renders-with-unnamed-slots\");\n });\n\n it(\"should render with short app title\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation short-app-title=\"ABCD\" version=\"v0.0.0\" app-title=\"Very Very Long Title\" status=\"BETA\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n expect(page.rootInstance.menuOpen).toBe(false);\n await page.rootInstance.toggleMenu();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\"renders-with-short-app-title\");\n });\n\n it(\"should render with slotted title\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem, Typography],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\">\n <ic-typography slot=\"app-title\">App title</ic-typography>\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n expect(page.rootInstance.menuOpen).toBe(false);\n await page.rootInstance.toggleMenu();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\"renders-with-slotted-app-title\");\n });\n\n it(\"should test menu toggle\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem, Button],\n html: `<ic-side-navigation app-title=\"ACME\" version=\"v0.0.0\" status=\"BETA\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item></ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n await page.waitForChanges();\n expect(page.rootInstance.menuOpen).toBe(false);\n await page.rootInstance.toggleMenu();\n await page.waitForChanges();\n expect(page.rootInstance.menuOpen).toBe(true);\n await page.rootInstance.toggleMenu();\n await page.waitForChanges();\n await new Promise((r) => setTimeout(r, 2000));\n expect(page.rootInstance.menuOpen).toBe(false);\n });\n\n it(\"should test resizing - collapsed icon labels false\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"false\">\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n });\n\n it(\"should test transitionend event\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem],\n html: `\n <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.rootInstance.menuExpanded).toBe(false);\n await page.rootInstance.toggleMenuExpanded(true);\n await new Promise((r) => setTimeout(r, 2000));\n\n page.root.dispatchEvent(\n new window.window.Event(\"transitionend\", {\n bubbles: true,\n cancelable: true,\n })\n );\n\n await page.waitForChanges();\n expect(page.rootInstance.menuExpanded).toBe(true);\n });\n\n it(\"should test theme change\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation],\n html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n </ic-side-navigation>`,\n });\n\n await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n await page.waitForChanges();\n expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n await page.waitForChanges();\n expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n\n // test disconnected callback\n page.setContent(\"\");\n });\n\n it(\"should render with slotted primary secondary navigation and expanded\", async () => {\n const page = await newSpecPage({\n components: [SideNavigation, NavigationItem, NavigationGroup],\n html: `<ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\" expanded=\"true\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-navigation-item slot=\"primary-navigation\">\n <a\n slot=\"navigation-item\"\n class=\"active\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n <ic-navigation-group\n slot=\"primary-navigation\"\n label=\"Second navigation group\"\n expandable=\"true\"\n >\n <ic-navigation-item>\n <a\n slot=\"navigation-item\"\n href=\"/child-item-2\"\n aria-label=\"Daily Tippers\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n Daily Tippers\n </a>\n </ic-navigation-item>\n </ic-navigation-group>\n <ic-navigation-item slot=\"secondary-navigation\">\n <a\n slot=\"navigation-item\"\n href=\"/bar\"\n aria-label=\"bar\"\n >\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n bar\n </a>\n </ic-navigation-item>\n </ic-side-navigation>\n `,\n });\n\n expect(page.root).toMatchSnapshot(\n \"renders-with-slotted-primary-secondary-navigation-and-expanded\"\n );\n });\n});\n"]}
|
@@ -64,6 +64,17 @@ export class TextField {
|
|
64
64
|
forceUpdate(this);
|
65
65
|
}
|
66
66
|
};
|
67
|
+
this.showValidation = () => {
|
68
|
+
const maxNumChars = this.readonly ? 0 : this.maxLength;
|
69
|
+
const emptyString = isEmptyString(this.validationStatus) ||
|
70
|
+
isEmptyString(this.validationText);
|
71
|
+
const valueOutsideRange = this.minValueUnattained || this.maxValueExceeded;
|
72
|
+
const charOutsideRange = maxNumChars > 0 ||
|
73
|
+
this.maxCharactersError ||
|
74
|
+
this.minCharactersUnattained;
|
75
|
+
return ((!emptyString || valueOutsideRange || charOutsideRange) &&
|
76
|
+
!this.validationInlineInternal);
|
77
|
+
};
|
67
78
|
this.numChars = 0;
|
68
79
|
this.maxCharactersReached = false;
|
69
80
|
this.maxCharactersError = false;
|
@@ -170,7 +181,7 @@ export class TextField {
|
|
170
181
|
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
171
182
|
}
|
172
183
|
render() {
|
173
|
-
const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, maxCharacters, maxCharactersError, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
|
184
|
+
const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, maxCharacters, maxCharactersError, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, showValidation, } = this;
|
174
185
|
const disabledMode = readonly || disabled;
|
175
186
|
const currentStatus = maxLengthExceeded ||
|
176
187
|
maxValueExceeded ||
|
@@ -223,14 +234,7 @@ export class TextField {
|
|
223
234
|
["no-resize"]: resize === false || readonly,
|
224
235
|
["no-left-pad"]: !showLeftIcon && readonly,
|
225
236
|
["readonly"]: readonly,
|
226
|
-
}, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (
|
227
|
-
!isEmptyString(validationText) ||
|
228
|
-
maxNumChars > 0 ||
|
229
|
-
maxValueExceeded ||
|
230
|
-
maxCharactersError ||
|
231
|
-
minCharactersUnattained ||
|
232
|
-
minValueUnattained) &&
|
233
|
-
!validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
|
237
|
+
}, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), showValidation() && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
|
234
238
|
(currentStatus === IcInformationStatus.Success &&
|
235
239
|
validationInline) ||
|
236
240
|
validationInlineInternal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersError: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxLengthExceeded: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n */\n\n /**\n * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autoFocus = false;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /**\n * The label for the input.\n */\n @Prop() label!: string;\n\n /**\n * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n */\n @Prop() max: string | number = undefined;\n\n /**\n * The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.\n */\n @Prop() maxCharacters: number = 0;\n\n /**\n * The count of characters in the field. Will display a warning if the bound is reached.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * The text to display as the validation message when the maximum length is exceeded.\n */\n @Prop() maxLengthMessage: string = \"Maximum length exceeded\";\n\n /**\n * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n */\n @Prop() min: string | number = undefined;\n\n /**\n * The minimum number of characters that can be entered in the field.\n */\n @Prop() minCharacters: number = 0;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * The number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * The size of the text field component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * If `true`, the value of the text field will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n /**\n * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * @internal If `true`, the validation will display inline.\n */\n @Prop() validationInlineInternal: boolean = false;\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.getMaxLengthExceeded(newValue);\n\n this.getMaxCharactersReached(newValue);\n\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n }\n\n this.getMaxLengthExceeded(this.value);\n\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersError = this.maxCharactersReached;\n }\n\n /**\n * Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getMaxLengthExceeded = (value: string) => {\n this.numChars = value.length;\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n\n if (this.maxLength > 0) {\n this.maxLengthExceeded = this.numChars > this.maxLength;\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = value.length;\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersError && !this.maxCharactersReached) {\n this.maxCharactersError = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n maxCharacters,\n maxCharactersError,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const currentStatus =\n maxLengthExceeded ||\n maxValueExceeded ||\n minValueUnattained ||\n minCharactersUnattained ||\n maxCharactersError\n ? maxCharactersError\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? this.maxLengthMessage\n : maxCharactersError\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n const messageAriaLive =\n maxLengthExceeded ||\n maxCharactersError ||\n maxValueExceeded ||\n minValueUnattained ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n const hiddenCharCountDescId =\n maxLength > 0 ? `${inputId}-charcount-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n size={small ? \"small\" : size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline ? (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholder ? placeholder : \"\"}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {(!isEmptyString(validationStatus) ||\n !isEmptyString(validationText) ||\n maxNumChars > 0 ||\n maxValueExceeded ||\n maxCharactersError ||\n minCharactersUnattained ||\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline) ||\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersError: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxLengthExceeded: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n */\n\n /**\n * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autoFocus = false;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /**\n * The label for the input.\n */\n @Prop() label!: string;\n\n /**\n * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n */\n @Prop() max: string | number = undefined;\n\n /**\n * The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.\n */\n @Prop() maxCharacters: number = 0;\n\n /**\n * The count of characters in the field. Will display a warning if the bound is reached.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * The text to display as the validation message when the maximum length is exceeded.\n */\n @Prop() maxLengthMessage: string = \"Maximum length exceeded\";\n\n /**\n * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n */\n @Prop() min: string | number = undefined;\n\n /**\n * The minimum number of characters that can be entered in the field.\n */\n @Prop() minCharacters: number = 0;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * The number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * The size of the text field component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * If `true`, the value of the text field will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n /**\n * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * @internal If `true`, the validation will display inline.\n */\n @Prop() validationInlineInternal: boolean = false;\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.getMaxLengthExceeded(newValue);\n\n this.getMaxCharactersReached(newValue);\n\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n }\n\n this.getMaxLengthExceeded(this.value);\n\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersError = this.maxCharactersReached;\n }\n\n /**\n * Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getMaxLengthExceeded = (value: string) => {\n this.numChars = value.length;\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n\n if (this.maxLength > 0) {\n this.maxLengthExceeded = this.numChars > this.maxLength;\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = value.length;\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersError && !this.maxCharactersReached) {\n this.maxCharactersError = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private showValidation = (): boolean => {\n const maxNumChars = this.readonly ? 0 : this.maxLength;\n const emptyString =\n isEmptyString(this.validationStatus) ||\n isEmptyString(this.validationText);\n const valueOutsideRange = this.minValueUnattained || this.maxValueExceeded;\n const charOutsideRange =\n maxNumChars > 0 ||\n this.maxCharactersError ||\n this.minCharactersUnattained;\n return (\n (!emptyString || valueOutsideRange || charOutsideRange) &&\n !this.validationInlineInternal\n );\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n maxCharacters,\n maxCharactersError,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n showValidation,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const currentStatus =\n maxLengthExceeded ||\n maxValueExceeded ||\n minValueUnattained ||\n minCharactersUnattained ||\n maxCharactersError\n ? maxCharactersError\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? this.maxLengthMessage\n : maxCharactersError\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n const messageAriaLive =\n maxLengthExceeded ||\n maxCharactersError ||\n maxValueExceeded ||\n minValueUnattained ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n const hiddenCharCountDescId =\n maxLength > 0 ? `${inputId}-charcount-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n size={small ? \"small\" : size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline ? (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholder ? placeholder : \"\"}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {showValidation() && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline) ||\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Host, h, } from "@stencil/core";
|
1
|
+
import { Host, h, forceUpdate, } from "@stencil/core";
|
2
2
|
import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
|
3
3
|
/**
|
4
4
|
* @slot icon - Content will be displayed alongside the toggle button label.
|
@@ -6,6 +6,10 @@ import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, } fr
|
|
6
6
|
*/
|
7
7
|
export class ToggleButton {
|
8
8
|
constructor() {
|
9
|
+
this.hostMutationObserver = null;
|
10
|
+
this.hostMutationCallback = () => {
|
11
|
+
forceUpdate(this);
|
12
|
+
};
|
9
13
|
this.handleFocus = (ev) => {
|
10
14
|
ev.stopImmediatePropagation();
|
11
15
|
};
|
@@ -39,6 +43,18 @@ export class ToggleButton {
|
|
39
43
|
propName: this.variant === "icon" ? "accessible-label" : "label",
|
40
44
|
},
|
41
45
|
], "Toggle button");
|
46
|
+
if (typeof MutationObserver !== "undefined") {
|
47
|
+
this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
|
48
|
+
this.hostMutationObserver.observe(this.el, {
|
49
|
+
childList: true,
|
50
|
+
});
|
51
|
+
}
|
52
|
+
}
|
53
|
+
disconnectedCallback() {
|
54
|
+
if (this.hostMutationObserver !== null &&
|
55
|
+
this.hostMutationObserver !== undefined) {
|
56
|
+
this.hostMutationObserver.disconnect();
|
57
|
+
}
|
42
58
|
}
|
43
59
|
handleHostClick(e) {
|
44
60
|
if (this.disabled) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,CAAC,
|
1
|
+
{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n private iconPosition: \"left\" | \"right\" | \"top\";\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcToggleButtonElement;\n\n /**\n * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n */\n @Prop() accessibleLabel?: string;\n\n /**\n * The appearance of the toggle button.\n */\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n /**\n * If `true`, the toggle button will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * If `true`, the toggle button will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The placement of the icon in relation to the toggle button label.\n */\n @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n /**\n * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the toggle button will be in loading state.\n */\n @Prop() loading?: boolean = false;\n\n /**\n * The size of the toggle button to be displayed.\n */\n @Prop() size?: IcSizes = \"default\";\n\n /**\n * If `true`, the toggle button will be in a checked state.\n */\n @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n /**\n * Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n const parentIconPlacement = (\n this.el.parentElement as HTMLIcToggleButtonGroupElement\n ).iconPlacement;\n this.iconPosition = this.iconPlacement || parentIconPlacement;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n if (typeof MutationObserver !== \"undefined\") {\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n }\n\n disconnectedCallback(): void {\n if (\n this.hostMutationObserver !== null &&\n this.hostMutationObserver !== undefined\n ) {\n this.hostMutationObserver.disconnect();\n }\n }\n\n private hostMutationCallback = (): void => {\n forceUpdate(this);\n };\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.toggleChecked = !this.toggleChecked;\n }\n }\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = (): void => {\n !this.loading &&\n !this.disabled &&\n this.icToggleChecked.emit({\n checked: this.toggleChecked,\n });\n };\n\n render() {\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"checked\"]: this.toggleChecked,\n [`${this.appearance}`]: true,\n [\"icon\"]: this.variant === \"icon\",\n [`${this.size}`]: true,\n [\"loading\"]: this.loading,\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={this.toggleChecked.toString()}\n variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n onClick={this.handleClick}\n title={this.accessibleLabel}\n aria-label={`${\n this.accessibleLabel ? this.accessibleLabel : this.label\n }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n disabled={this.disabled}\n appearance={this.appearance}\n size={this.size}\n fullWidth={this.fullWidth}\n loading={this.loading}\n aria-disabled={`${this.disabled}`}\n >\n {this.variant !== \"icon\" && this.label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot\n name=\"icon\"\n slot={`${\n this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n }`}\n ></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"]}
|