@six-group/ui-library 5.0.0-rc.1 → 5.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-C8rK7OAe.js +4 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/six-range.cjs.entry.js.map +1 -1
- package/dist/cjs/six-range.entry.cjs.js.map +1 -1
- package/dist/cjs/six-rating.cjs.entry.js +126 -0
- package/dist/cjs/six-rating.cjs.entry.js.map +1 -0
- package/dist/cjs/six-rating.entry.cjs.js.map +1 -0
- package/dist/cjs/six-root.cjs.entry.js +1 -1
- package/dist/cjs/six-sidebar-item.cjs.entry.js +2 -2
- package/dist/cjs/six-sidebar.cjs.entry.js +2 -2
- package/dist/cjs/six-switch.cjs.entry.js +2 -2
- package/dist/cjs/six-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/six-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/six-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/six-tab.cjs.entry.js +2 -2
- package/dist/cjs/six-tag.cjs.entry.js +2 -2
- package/dist/cjs/six-textarea.cjs.entry.js +2 -2
- package/dist/cjs/six-tile.cjs.entry.js +5 -5
- package/dist/cjs/six-timepicker.cjs.entry.js +17 -9
- package/dist/cjs/six-timepicker.cjs.entry.js.map +1 -1
- package/dist/cjs/six-timepicker.entry.cjs.js.map +1 -1
- package/dist/cjs/six-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/ui-library.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/six-rating/six-rating.css +125 -0
- package/dist/collection/components/six-rating/six-rating.js +432 -0
- package/dist/collection/components/six-rating/six-rating.js.map +1 -0
- package/dist/collection/components/six-root/six-root.js +1 -1
- package/dist/collection/components/six-sidebar/six-sidebar.js +2 -2
- package/dist/collection/components/six-sidebar-item/six-sidebar-item.js +2 -2
- package/dist/collection/components/six-switch/six-switch.js +2 -2
- package/dist/collection/components/six-tab/six-tab.js +2 -2
- package/dist/collection/components/six-tab-panel/six-tab-panel.js +1 -1
- package/dist/collection/components/six-tag/six-tag.js +2 -2
- package/dist/collection/components/six-textarea/six-textarea.js +2 -2
- package/dist/collection/components/six-tile/six-tile.js +5 -5
- package/dist/collection/components/six-timepicker/six-timepicker.js +17 -9
- package/dist/collection/components/six-timepicker/six-timepicker.js.map +1 -1
- package/dist/collection/components/six-tooltip/six-tooltip.js +2 -2
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-DnLdSdN5.js → p-CAJFkiLw.js} +19 -11
- package/dist/components/p-CAJFkiLw.js.map +1 -0
- package/dist/components/{p-Cs6mMfx-.js → p-ClylOmYH.js} +4 -4
- package/dist/components/{p-Cs6mMfx-.js.map → p-ClylOmYH.js.map} +1 -1
- package/dist/components/six-datepicker.js +1 -1
- package/dist/components/six-range.js.map +1 -1
- package/dist/components/six-rating.d.ts +11 -0
- package/dist/components/six-rating.js +173 -0
- package/dist/components/six-rating.js.map +1 -0
- package/dist/components/six-root.js +1 -1
- package/dist/components/six-sidebar-item.js +2 -2
- package/dist/components/six-sidebar.js +2 -2
- package/dist/components/six-switch.js +2 -2
- package/dist/components/six-switch.js.map +1 -1
- package/dist/components/six-tab-panel.js +1 -1
- package/dist/components/six-tab.js +2 -2
- package/dist/components/six-tag.js +3 -3
- package/dist/components/six-textarea.js +2 -2
- package/dist/components/six-tile.js +6 -6
- package/dist/components/six-timepicker.js +1 -1
- package/dist/components/six-tooltip.js +1 -1
- package/dist/components.json +468 -1
- package/dist/esm/index-JoG9I7EO.js +4 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/six-range.entry.js.map +1 -1
- package/dist/esm/six-rating.entry.js +124 -0
- package/dist/esm/six-rating.entry.js.map +1 -0
- package/dist/esm/six-root.entry.js +1 -1
- package/dist/esm/six-sidebar-item.entry.js +2 -2
- package/dist/esm/six-sidebar.entry.js +2 -2
- package/dist/esm/six-switch.entry.js +2 -2
- package/dist/esm/six-switch.entry.js.map +1 -1
- package/dist/esm/six-tab-panel.entry.js +1 -1
- package/dist/esm/six-tab.entry.js +2 -2
- package/dist/esm/six-tag.entry.js +2 -2
- package/dist/esm/six-textarea.entry.js +2 -2
- package/dist/esm/six-tile.entry.js +5 -5
- package/dist/esm/six-timepicker.entry.js +17 -9
- package/dist/esm/six-timepicker.entry.js.map +1 -1
- package/dist/esm/six-tooltip.entry.js +2 -2
- package/dist/esm/ui-library.js +1 -1
- package/dist/types/components/six-rating/six-rating.d.ts +52 -0
- package/dist/types/components.d.ts +160 -0
- package/dist/ui-library/{p-01243b2e.entry.js → p-03ca4af8.entry.js} +2 -2
- package/dist/ui-library/p-12e7a9e1.entry.js +2 -0
- package/dist/ui-library/p-12e7a9e1.entry.js.map +1 -0
- package/dist/ui-library/{p-362ff192.entry.js → p-21cbccb1.entry.js} +2 -2
- package/dist/ui-library/p-39668d61.entry.js +2 -0
- package/dist/ui-library/p-39668d61.entry.js.map +1 -0
- package/dist/ui-library/{p-ea61b009.entry.js → p-6c8182fa.entry.js} +2 -2
- package/dist/ui-library/{p-25ff87fe.entry.js → p-83b35622.entry.js} +2 -2
- package/dist/ui-library/{p-f6423fca.entry.js → p-c8fbf085.entry.js} +2 -2
- package/dist/ui-library/p-d7c7398d.entry.js +2 -0
- package/dist/ui-library/{p-f4dd7b57.entry.js → p-d9e770ab.entry.js} +2 -2
- package/dist/ui-library/p-d9e770ab.entry.js.map +1 -0
- package/dist/ui-library/p-ea3bf68d.entry.js +2 -0
- package/dist/ui-library/p-ee980a0f.entry.js.map +1 -1
- package/dist/ui-library/{p-29d79fe3.entry.js → p-f54d3616.entry.js} +2 -2
- package/dist/ui-library/{p-285666de.entry.js → p-f6a1c20b.entry.js} +2 -2
- package/dist/ui-library/six-range.entry.esm.js.map +1 -1
- package/dist/ui-library/six-rating.entry.esm.js.map +1 -0
- package/dist/ui-library/six-switch.entry.esm.js.map +1 -1
- package/dist/ui-library/six-timepicker.entry.esm.js.map +1 -1
- package/dist/ui-library/ui-library.css +1 -1
- package/dist/ui-library/ui-library.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-DnLdSdN5.js.map +0 -1
- package/dist/ui-library/p-494546c8.entry.js +0 -2
- package/dist/ui-library/p-4f52c56f.entry.js +0 -2
- package/dist/ui-library/p-4f52c56f.entry.js.map +0 -1
- package/dist/ui-library/p-d36ec323.entry.js +0 -2
- package/dist/ui-library/p-f4dd7b57.entry.js.map +0 -1
- /package/dist/ui-library/{p-01243b2e.entry.js.map → p-03ca4af8.entry.js.map} +0 -0
- /package/dist/ui-library/{p-362ff192.entry.js.map → p-21cbccb1.entry.js.map} +0 -0
- /package/dist/ui-library/{p-ea61b009.entry.js.map → p-6c8182fa.entry.js.map} +0 -0
- /package/dist/ui-library/{p-25ff87fe.entry.js.map → p-83b35622.entry.js.map} +0 -0
- /package/dist/ui-library/{p-f6423fca.entry.js.map → p-c8fbf085.entry.js.map} +0 -0
- /package/dist/ui-library/{p-d36ec323.entry.js.map → p-d7c7398d.entry.js.map} +0 -0
- /package/dist/ui-library/{p-494546c8.entry.js.map → p-ea3bf68d.entry.js.map} +0 -0
- /package/dist/ui-library/{p-29d79fe3.entry.js.map → p-f54d3616.entry.js.map} +0 -0
- /package/dist/ui-library/{p-285666de.entry.js.map → p-f6a1c20b.entry.js.map} +0 -0
|
@@ -1627,6 +1627,67 @@ export namespace Components {
|
|
|
1627
1627
|
*/
|
|
1628
1628
|
"value": number;
|
|
1629
1629
|
}
|
|
1630
|
+
interface SixRating {
|
|
1631
|
+
/**
|
|
1632
|
+
* Set to true to disable the rating.
|
|
1633
|
+
* @default false
|
|
1634
|
+
*/
|
|
1635
|
+
"disabled": boolean;
|
|
1636
|
+
/**
|
|
1637
|
+
* The error message shown, if `invalid` is set to true.
|
|
1638
|
+
* @default ''
|
|
1639
|
+
*/
|
|
1640
|
+
"errorText": string | string[];
|
|
1641
|
+
/**
|
|
1642
|
+
* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
|
|
1643
|
+
*/
|
|
1644
|
+
"errorTextCount"?: number;
|
|
1645
|
+
/**
|
|
1646
|
+
* The rating's help text. Alternatively, you can use the help-text slot.
|
|
1647
|
+
* @default ''
|
|
1648
|
+
*/
|
|
1649
|
+
"helpText": string;
|
|
1650
|
+
/**
|
|
1651
|
+
* If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
|
|
1652
|
+
* @default false
|
|
1653
|
+
*/
|
|
1654
|
+
"invalid": boolean;
|
|
1655
|
+
/**
|
|
1656
|
+
* The label text.
|
|
1657
|
+
* @default ''
|
|
1658
|
+
*/
|
|
1659
|
+
"label": string;
|
|
1660
|
+
/**
|
|
1661
|
+
* Maximum number of stars. Default is 5
|
|
1662
|
+
* @default 5
|
|
1663
|
+
*/
|
|
1664
|
+
"max": number;
|
|
1665
|
+
/**
|
|
1666
|
+
* The rating's name attribute.
|
|
1667
|
+
* @default ''
|
|
1668
|
+
*/
|
|
1669
|
+
"name": string;
|
|
1670
|
+
/**
|
|
1671
|
+
* If its readonly
|
|
1672
|
+
* @default false
|
|
1673
|
+
*/
|
|
1674
|
+
"readonly": boolean;
|
|
1675
|
+
/**
|
|
1676
|
+
* Set to true to show an asterisk beneath the label.
|
|
1677
|
+
* @default false
|
|
1678
|
+
*/
|
|
1679
|
+
"required": boolean;
|
|
1680
|
+
/**
|
|
1681
|
+
* Size of the stars
|
|
1682
|
+
* @default 'medium'
|
|
1683
|
+
*/
|
|
1684
|
+
"size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
|
|
1685
|
+
/**
|
|
1686
|
+
* The rating's value attribute.
|
|
1687
|
+
* @default 0
|
|
1688
|
+
*/
|
|
1689
|
+
"value": number;
|
|
1690
|
+
}
|
|
1630
1691
|
/**
|
|
1631
1692
|
* @since 1.0
|
|
1632
1693
|
* @status stable
|
|
@@ -2537,6 +2598,10 @@ export interface SixRangeCustomEvent<T> extends CustomEvent<T> {
|
|
|
2537
2598
|
detail: T;
|
|
2538
2599
|
target: HTMLSixRangeElement;
|
|
2539
2600
|
}
|
|
2601
|
+
export interface SixRatingCustomEvent<T> extends CustomEvent<T> {
|
|
2602
|
+
detail: T;
|
|
2603
|
+
target: HTMLSixRatingElement;
|
|
2604
|
+
}
|
|
2540
2605
|
export interface SixSearchFieldCustomEvent<T> extends CustomEvent<T> {
|
|
2541
2606
|
detail: T;
|
|
2542
2607
|
target: HTMLSixSearchFieldElement;
|
|
@@ -3220,6 +3285,25 @@ declare global {
|
|
|
3220
3285
|
prototype: HTMLSixRangeElement;
|
|
3221
3286
|
new (): HTMLSixRangeElement;
|
|
3222
3287
|
};
|
|
3288
|
+
interface HTMLSixRatingElementEventMap {
|
|
3289
|
+
"six-rating-blur": number;
|
|
3290
|
+
"six-rating-change": number;
|
|
3291
|
+
"six-rating-focus": EmptyPayload;
|
|
3292
|
+
}
|
|
3293
|
+
interface HTMLSixRatingElement extends Components.SixRating, HTMLStencilElement {
|
|
3294
|
+
addEventListener<K extends keyof HTMLSixRatingElementEventMap>(type: K, listener: (this: HTMLSixRatingElement, ev: SixRatingCustomEvent<HTMLSixRatingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
3295
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
3296
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
3297
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
3298
|
+
removeEventListener<K extends keyof HTMLSixRatingElementEventMap>(type: K, listener: (this: HTMLSixRatingElement, ev: SixRatingCustomEvent<HTMLSixRatingElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
3299
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
3300
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
3301
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
3302
|
+
}
|
|
3303
|
+
var HTMLSixRatingElement: {
|
|
3304
|
+
prototype: HTMLSixRatingElement;
|
|
3305
|
+
new (): HTMLSixRatingElement;
|
|
3306
|
+
};
|
|
3223
3307
|
/**
|
|
3224
3308
|
* @since 1.0
|
|
3225
3309
|
* @status stable
|
|
@@ -3575,6 +3659,7 @@ declare global {
|
|
|
3575
3659
|
"six-progress-ring": HTMLSixProgressRingElement;
|
|
3576
3660
|
"six-radio": HTMLSixRadioElement;
|
|
3577
3661
|
"six-range": HTMLSixRangeElement;
|
|
3662
|
+
"six-rating": HTMLSixRatingElement;
|
|
3578
3663
|
"six-root": HTMLSixRootElement;
|
|
3579
3664
|
"six-search-field": HTMLSixSearchFieldElement;
|
|
3580
3665
|
"six-select": HTMLSixSelectElement;
|
|
@@ -5265,6 +5350,79 @@ declare namespace LocalJSX {
|
|
|
5265
5350
|
*/
|
|
5266
5351
|
"value"?: number;
|
|
5267
5352
|
}
|
|
5353
|
+
interface SixRating {
|
|
5354
|
+
/**
|
|
5355
|
+
* Set to true to disable the rating.
|
|
5356
|
+
* @default false
|
|
5357
|
+
*/
|
|
5358
|
+
"disabled"?: boolean;
|
|
5359
|
+
/**
|
|
5360
|
+
* The error message shown, if `invalid` is set to true.
|
|
5361
|
+
* @default ''
|
|
5362
|
+
*/
|
|
5363
|
+
"errorText"?: string | string[];
|
|
5364
|
+
/**
|
|
5365
|
+
* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1
|
|
5366
|
+
*/
|
|
5367
|
+
"errorTextCount"?: number;
|
|
5368
|
+
/**
|
|
5369
|
+
* The rating's help text. Alternatively, you can use the help-text slot.
|
|
5370
|
+
* @default ''
|
|
5371
|
+
*/
|
|
5372
|
+
"helpText"?: string;
|
|
5373
|
+
/**
|
|
5374
|
+
* If this property is set to true and an error message is provided by `errorText`, the error message is displayed.
|
|
5375
|
+
* @default false
|
|
5376
|
+
*/
|
|
5377
|
+
"invalid"?: boolean;
|
|
5378
|
+
/**
|
|
5379
|
+
* The label text.
|
|
5380
|
+
* @default ''
|
|
5381
|
+
*/
|
|
5382
|
+
"label"?: string;
|
|
5383
|
+
/**
|
|
5384
|
+
* Maximum number of stars. Default is 5
|
|
5385
|
+
* @default 5
|
|
5386
|
+
*/
|
|
5387
|
+
"max"?: number;
|
|
5388
|
+
/**
|
|
5389
|
+
* The rating's name attribute.
|
|
5390
|
+
* @default ''
|
|
5391
|
+
*/
|
|
5392
|
+
"name"?: string;
|
|
5393
|
+
/**
|
|
5394
|
+
* Emitted when the control loses focus.
|
|
5395
|
+
*/
|
|
5396
|
+
"onSix-rating-blur"?: (event: SixRatingCustomEvent<number>) => void;
|
|
5397
|
+
/**
|
|
5398
|
+
* Emitted when the control's checked state changes.
|
|
5399
|
+
*/
|
|
5400
|
+
"onSix-rating-change"?: (event: SixRatingCustomEvent<number>) => void;
|
|
5401
|
+
/**
|
|
5402
|
+
* Emitted when the control gains focus.
|
|
5403
|
+
*/
|
|
5404
|
+
"onSix-rating-focus"?: (event: SixRatingCustomEvent<EmptyPayload>) => void;
|
|
5405
|
+
/**
|
|
5406
|
+
* If its readonly
|
|
5407
|
+
* @default false
|
|
5408
|
+
*/
|
|
5409
|
+
"readonly"?: boolean;
|
|
5410
|
+
/**
|
|
5411
|
+
* Set to true to show an asterisk beneath the label.
|
|
5412
|
+
* @default false
|
|
5413
|
+
*/
|
|
5414
|
+
"required"?: boolean;
|
|
5415
|
+
/**
|
|
5416
|
+
* Size of the stars
|
|
5417
|
+
* @default 'medium'
|
|
5418
|
+
*/
|
|
5419
|
+
"size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
|
|
5420
|
+
/**
|
|
5421
|
+
* The rating's value attribute.
|
|
5422
|
+
* @default 0
|
|
5423
|
+
*/
|
|
5424
|
+
"value"?: number;
|
|
5425
|
+
}
|
|
5268
5426
|
/**
|
|
5269
5427
|
* @since 1.0
|
|
5270
5428
|
* @status stable
|
|
@@ -6179,6 +6337,7 @@ declare namespace LocalJSX {
|
|
|
6179
6337
|
"six-progress-ring": SixProgressRing;
|
|
6180
6338
|
"six-radio": SixRadio;
|
|
6181
6339
|
"six-range": SixRange;
|
|
6340
|
+
"six-rating": SixRating;
|
|
6182
6341
|
"six-root": SixRoot;
|
|
6183
6342
|
"six-search-field": SixSearchField;
|
|
6184
6343
|
"six-select": SixSelect;
|
|
@@ -6414,6 +6573,7 @@ declare module "@stencil/core" {
|
|
|
6414
6573
|
* Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
|
|
6415
6574
|
*/
|
|
6416
6575
|
"six-range": LocalJSX.SixRange & JSXBase.HTMLAttributes<HTMLSixRangeElement>;
|
|
6576
|
+
"six-rating": LocalJSX.SixRating & JSXBase.HTMLAttributes<HTMLSixRatingElement>;
|
|
6417
6577
|
/**
|
|
6418
6578
|
* @since 1.0
|
|
6419
6579
|
* @status stable
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as a,H as o,g as s}from"./p-JoG9I7EO.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab.tab--left,.tab.tab--right{display:inline-block;text-align:left}.tab.tab--left::before,.tab.tab--right::before{display:block;font-weight:var(--six-font-weight-bold);content:attr(title);height:0;overflow:hidden;visibility:hidden}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";let r=0;const b=class{constructor(a){t(this,a);this.sixClose=i(this,"six-tab-close");this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var i;(i=this.tab)===null||i===void 0?void 0:i.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const i=this.host.closest("six-tab-group");const s=(t=i===null||i===void 0?void 0:i.placement)!==null&&t!==void 0?t:"top";return a(o,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as a,H as o,g as s}from"./p-JoG9I7EO.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab.tab--left,.tab.tab--right{display:inline-block;text-align:left}.tab.tab--left::before,.tab.tab--right::before{display:block;font-weight:var(--six-font-weight-bold);content:attr(title);height:0;overflow:hidden;visibility:hidden}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";let r=0;const b=class{constructor(a){t(this,a);this.sixClose=i(this,"six-tab-close");this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var i;(i=this.tab)===null||i===void 0?void 0:i.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const i=this.host.closest("six-tab-group");const s=(t=i===null||i===void 0?void 0:i.placement)!==null&&t!==void 0?t:"top";return a(o,{key:"40b4042f28816b55ef585cf24570b64a44031863",id:this.host.id||this.componentId},a("div",{key:"e4e8ba43cf2e1384a421835fe1131ea411ac7a18",part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":s==="top","tab--bottom":s==="bottom","tab--left":s==="left","tab--right":s==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0",title:this.host.innerHTML},a("slot",{key:"39b1a75c51726543e0371e2607c6aa9197483b34"}),this.closable&&a("six-icon-button",{key:"b9b2468f19b875ea58292f9ed330b49cff084d7c",name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),a("div",{key:"da5cf7175879826bfb96f52cd8aca427372e32e6",part:this.active?"active-tab-indicator":"",class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":s==="top","tab__indicator--bottom":s==="bottom","tab__indicator--left":s==="left","tab__indicator--right":s==="right"}}))}get host(){return s(this)}};b.style=e;export{b as six_tab};
|
|
2
|
+
//# sourceMappingURL=p-03ca4af8.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as s,g as e}from"./p-JoG9I7EO.js";import{I as r}from"./p-WA6V9mN8.js";import{D as n,b as o,a as h}from"./p-CKhg9ibv.js";import{E as a}from"./p-C4h4qpGl.js";import{h as c}from"./p-j3oIB5oT.js";import{a as l,m as p}from"./p-Dd6pdO8C.js";const u=()=>{const i=new Date;return{hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:true}};const m=12;const d=i=>i>m?i-m:i;const f=()=>{const i=new Date;const t=i.getHours();return{hours:d(t),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:false,period:t>=m?"PM":"AM"}};const g=(i=true)=>i?u():f();const x=(i,t)=>{const s=i.split(":");const e=t.split(":");return s.length===e.length};const b=(i,t)=>{const s=i.split(":");const e=t.split(":");if(!x(i,t)){console.error(`Timestring did not match expected format.\nExpected format: ${t}\nReceived timestring: ${i}`)}const r={};s.forEach(((i,t)=>{const s=e[t];switch(s){case"HH":r.hours=Number(i);r.has24Hours=true;break;case"hh":r.hours=Number(i);r.has24Hours=false;break;case"mm":r.minutes=Number(i);break;case"ss":r.seconds=Number(i);break;case"ms":r.milliseconds=Number(i);break;case"aa":r.period=i.toUpperCase()==="PM"?"PM":"AM"}}));return r};const k=(i,t)=>{if(i==null){return""}const s=t.split(":");return s.map((t=>{switch(t){case"HH":case"hh":return String(i.hours).padStart(2,"0");case"mm":return String(i.minutes).padStart(2,"0");case"ss":return String(i.seconds).padStart(2,"0");case"ms":return String(i.milliseconds).padStart(3,"0");case"aa":return String(i.period)}})).join(":")};const v=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;background-color:white;padding:0.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";const _=145;const y=class{constructor(s){i(this,s);this.sixChange=t(this,"six-timepicker-change");this.sixChangeDebounced=t(this,"six-timepicker-change-debounced");this.sixClear=t(this,"six-timepicker-clear");this.eventListeners=new a;this.format="HH:mm:ss";this.separator=":";this.value="";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.size="medium";this.required=false;this.errorText="";this.label="";this.invalid=false;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false;this.timeout=n;this.interval=o;this.debounce=n;this.isPopupContentUp=false;this.isDropDownContentUp=false;this.popupValue={};this.handlePickerChange=(i,t)=>{i.stopPropagation();if(this.popupValue==null){return}this.popupValue[t]=i.detail;const s=k(this.popupValue,this.format);this.value=s;this.sixChange.emit({changedProperty:t,value:this.popupValue,valueAsString:s})};this.handleDocumentMouseDown=i=>{const t=i.composedPath();if(!t.includes(this.host)){this.closePopup();return}};this.handleClearClick=i=>{i.stopPropagation();if(this.inputElement!=null){this.inputElement.value=""}this.value="";this.sixClear.emit();this.sixChange.emit({value:{},valueAsString:""})}}async resizeHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}async scrollHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}valueChanged(){this.updateValue()}async setFocus(i){var t;(t=this.inputElement)===null||t===void 0?void 0:t.setFocus(i)}connectedCallback(){this.eventListeners.forward("six-timepicker-change","change",this.host)}componentWillLoad(){this.updateValue();if(this.inline){this.open=true}if(this.open){this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}componentDidLoad(){if(this.inputElement==null)return;const i=this.inputElement;this.eventListeners.add(this.host,"six-timepicker-change",h((i=>this.sixChangeDebounced.emit(i.detail)),this.debounce));this.eventListeners.add(i,"six-input-input",h((t=>{t.stopPropagation();if(!x(i.value,this.format)){this.value=i.value;this.sixChange.emit({value:{},valueAsString:""});return}else{this.value=i.value;this.popupValue=b(i.value,this.format);this.sixChange.emit({value:this.popupValue,valueAsString:k(this.popupValue,this.format)})}}),this.debounce))}componentDidRender(){l(this.hoist,this.popup,this.inputElement,this.wrapper,_,(i=>this.isDropDownContentUp=i))}disconnectedCallback(){this.eventListeners.removeAll()}updateValue(){if(typeof this.value!=="string"||!x(this.value,this.format)){this.value=""}else if(this.inputElement!=null){this.inputElement.value=this.value}if(this.value===""){if(this.defaultTime==null){this.popupValue=g(this.is24HourClock())}else{this.popupValue=b(this.defaultTime,this.format)}}else{this.popupValue=b(this.value,this.format)}}calcIsPopupContentUp(){if(this.inputElement==null||this.wrapper==null){return}const i=this.inputElement.getBoundingClientRect();const t=this.wrapper.getBoundingClientRect();const s=Math.max(t.height,_);const e=i.y>window.innerHeight/2;this.isPopupContentUp=e&&window.innerHeight<i.bottom+s}moveOpenHoistedPopup(){p(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,_)}getSixTimeUnitPicker(i){return s("six-item-picker",{class:i.class,timeout:this.timeout,interval:this.interval,padded:true,min:i.min,max:i.max,value:this.popupValue[i.propertyName],items:i.items,type:i.type||r.NUMBER,"padding-length":i.paddingLength,"onSix-item-picker-change":t=>this.handlePickerChange(t,i.propertyName)})}getHour24Picker(){if(!this.is24HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:23,propertyName:"hours"})}is24HourClock(){return this.format.includes("HH")}getHour12Picker(){if(!this.is12HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:11,propertyName:"hours"})}is12HourClock(){return this.format.includes("hh")}getAmPmPicker(){if(!this.is12HourClock()){return}const i=["AM","PM"];return this.getSixTimeUnitPicker({items:i,type:r.CUSTOM,propertyName:"period"})}getMinutePicker(){if(!this.format.includes("mm")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"minutes"})}getSecondsPicker(){if(!this.format.includes("ss")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"seconds"})}getMillisecondsPicker(){if(!this.format.includes("ms")){return}return this.getSixTimeUnitPicker({min:0,max:999,class:"timepicker__item--wide",paddingLength:3,propertyName:"milliseconds"})}getSeparator(){return s("div",{class:"timepicker__separator"},s("span",null,this.separator))}getContent(){const i=[this.getHour24Picker(),this.getHour12Picker(),this.getMinutePicker(),this.getSecondsPicker(),this.getMillisecondsPicker()];const t=i.filter((i=>i!==undefined));return t.map(((i,s)=>{if(s===t.length-1){return[i]}return[i,this.getSeparator()]}))}openPopup(){if(!this.open&&!this.disabled){this.open=true;this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown)}renderClearable(){return this.clearable&&s("button",{slot:"suffix",class:{timepicker_clear:true,"timepicker_clear--right":this.iconPosition==="left","timepicker_clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},s("six-icon",{size:"small"},"clear"))}renderCustomIcon(){const i=c(this.host,"custom-icon")?s("slot",{name:"custom-icon"}):s("six-icon",{size:this.size==="large"?"medium":this.size},"watch_later");return s("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},i)}render(){return s("div",{key:"a3496612a52df399ccd8cb88e2f3564432758b74",part:"container",ref:i=>this.wrapper=i,class:"timepicker__container"},s("six-input",{key:"ca426a5b063102ea92550ed6779a46c56a663a22",ref:i=>this.inputElement=i,part:"input",onClick:()=>this.openPopup(),placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,errorTextCount:this.errorTextCount,errorText:this.errorText,invalid:this.invalid,size:this.size,name:this.name,label:this.label,required:this.required,class:{"input--empty":this.value==="","input--hide":this.inline}},this.renderCustomIcon(),this.renderClearable(),c(this.host,"label")?s("span",{slot:"label"},s("slot",{name:"label"})):null,c(this.host,"error-text")?s("span",{slot:"error-text"},s("slot",{name:"error-text"})):null),this.open&&s("div",{key:"8c03ea793c9452af88fe41699ec58b526057d834",ref:i=>this.popup=i,part:"popup",class:{timepicker__popup:true,"timepicker__popup--is-up":this.placement==null?this.placement==="top":this.isPopupContentUp,"timepicker__popup--is-inline":this.inline}},...this.getContent(),this.getAmPmPicker()))}get host(){return e(this)}static get watchers(){return{value:["valueChanged"]}}};y.style=v;export{y as six_timepicker};
|
|
2
|
+
//# sourceMappingURL=p-12e7a9e1.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","getCurrentTime","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","timeParts","formatParts","console","error","time","forEach","timeStringPart","i","formatStringPart","Number","toUpperCase","createTimeString","map","timeFormatPart","String","padStart","join","sixTimepickerCss","MIN_POPUP_HEIGHT","SixTimepicker","constructor","hostRef","this","eventListeners","EventListeners","separator","value","open","inline","readonly","disabled","size","required","errorText","label","invalid","name","clearable","iconPosition","hoist","timeout","DEFAULT_DEBOUNCE_FAST","interval","DEFAULT_DEBOUNCE_INSANELY_FAST","debounce","isPopupContentUp","isDropDownContentUp","popupValue","handlePickerChange","event","property","stopPropagation","detail","timeString","sixChange","emit","changedProperty","valueAsString","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","inputElement","sixClear","resizeHandler","calcIsPopupContentUp","moveOpenHoistedPopup","scrollHandler","valueChanged","updateValue","setFocus","options","_a","connectedCallback","forward","componentWillLoad","add","document","componentDidLoad","sixChangeDebounced","componentDidRender","adjustPopupForHoisting","popup","wrapper","isUp","disconnectedCallback","removeAll","defaultTime","is24HourClock","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","bottom","movePopup","getSixTimeUnitPicker","params","h","class","padded","min","propertyName","items","type","ItemPickerType","NUMBER","paddingLength","getHour24Picker","getHour12Picker","is12HourClock","getAmPmPicker","CUSTOM","getMinutePicker","getSecondsPicker","getMillisecondsPicker","getSeparator","getContent","elementsInOrder","visibleElements","filter","el","undefined","idx","openPopup","remove","renderClearable","slot","timepicker_clear","onClick","tabindex","renderCustomIcon","icon","hasSlot","part","prefix","render","key","ref","placeholder","errorTextCount","timepicker__popup","placement"],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' | 'PM';\n\nexport interface Time {\n hours?: number;\n minutes?: number;\n seconds?: number;\n milliseconds?: number;\n has24Hours?: boolean; // true => 24h, false => 12h\n period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n | 'HH' // 24h\n | 'hh' // 12h\n | 'mm' // minutes\n | 'ss' // seconds\n | 'ms' // milliseconds\n | 'aa'; // period (AM/PM)\n\n/*\n * Supported time formats\n */\nexport type TimeFormat =\n | 'HH:mm:ss'\n | 'hh:mm:ss:aa'\n | 'HH:mm:ss:ms'\n | 'hh:mm:ss:ms:aa'\n | 'HH:mm'\n | 'hh:mm:aa'\n | 'HH'\n | 'hh:aa'\n | 'mm'\n | 'ss'\n | 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n const now = new Date();\n return {\n hours: now.getHours(),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: true,\n };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n const now = new Date();\n const hours = now.getHours();\n return {\n hours: getHoursIn12HourFormat(hours),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: false,\n period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n const timeStringParts = timeStr.split(':');\n const timeFormatParts = format.split(':');\n return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n const timeParts = timeStr.split(':');\n const formatParts = format.split(':') as TimeFormatChar[];\n\n if (!isValidTimeString(timeStr, format)) {\n console.error(\n `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n );\n }\n\n const time: Time = {};\n\n timeParts.forEach((timeStringPart, i) => {\n const formatStringPart: TimeFormatChar = formatParts[i];\n switch (formatStringPart) {\n case 'HH':\n time.hours = Number(timeStringPart);\n time.has24Hours = true;\n break;\n case 'hh':\n time.hours = Number(timeStringPart);\n time.has24Hours = false;\n break;\n case 'mm':\n time.minutes = Number(timeStringPart);\n break;\n case 'ss':\n time.seconds = Number(timeStringPart);\n break;\n case 'ms':\n time.milliseconds = Number(timeStringPart);\n break;\n case 'aa':\n time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n }\n });\n return time;\n};\n\nexport const createTimeString = (time: Time | undefined, format: TimeFormat): string => {\n if (time == null) {\n return '';\n }\n\n const formatParts = format.split(':') as TimeFormatChar[];\n\n return formatParts\n .map((timeFormatPart) => {\n switch (timeFormatPart) {\n case 'HH':\n case 'hh':\n return String(time.hours).padStart(2, '0');\n case 'mm':\n return String(time.minutes).padStart(2, '0');\n case 'ss':\n return String(time.seconds).padStart(2, '0');\n case 'ms':\n return String(time.milliseconds).padStart(3, '0');\n case 'aa':\n return String(time.period);\n }\n })\n .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.timepicker {\n &_clear {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n\n &--right {\n right: 0;\n position: absolute;\n }\n\n &--left {\n right: 35px;\n position: absolute;\n }\n }\n\n &__container {\n position: relative;\n }\n\n &__popup {\n display: flex;\n justify-content: center;\n min-width: min-content;\n background-color: white;\n padding: 0.5em;\n box-shadow:\n 0 2px 4px -1px rgb(0 0 0 / 20%),\n 0 4px 5px 0 rgb(0 0 0 / 14%),\n 0 1px 10px 0 rgb(0 0 0 / 12%);\n user-select: none;\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n right: 0;\n left: 0;\n\n &--is-up {\n bottom: 100%;\n }\n\n &--is-inline {\n position: initial;\n box-shadow: none;\n border: 1px solid var(--six-color-web-rock-400);\n }\n }\n\n &__separator {\n display: flex;\n align-items: center;\n }\n\n &__item {\n &--wide {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n }\n}\n\n.input--empty .timepicker_clear {\n visibility: hidden;\n}\n\n.input--hide {\n display: none;\n}\n\n// Icon position\n.prefix {\n cursor: pointer;\n\n &--right {\n right: 0;\n display: inline-flex;\n position: absolute;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n margin-right: var(--six-input-spacing-medium);\n transition: var(--six-transition-fast) color;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n *\n */\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixTimepickerElement;\n\n /**\n * Define the time format. Valid formats are:\n *\n * HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n *\n * where HH is the 24 hour format\n * and hh is the 12 hour format\n *\n * Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * */\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /**\n * Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * */\n @Prop() separator = ':';\n\n /**\n * The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n */\n @Prop({ mutable: true }) value = '';\n\n /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Indicates whether the timepicker should be shown as an inline (always open) component */\n @Prop({ reflect: true }) inline = false;\n\n /**\n * If `true` the user can only select a time via the timepicker but not directly edit the input field.\n */\n @Prop() readonly = false;\n\n /**\n * If `true` the component is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The enforced placement of the dropdown panel.\n */\n @Prop() placement?: 'top' | 'bottom';\n\n /** Timepicker size. */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /**\n * The placeholder defines what text to be shown on the input element\n */\n @Prop() placeholder?: string;\n\n /** The input's error text. Alternatively, you can use the error-text slot. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** The input's label. Alternatively, you can use the label slot. */\n @Prop() label = '';\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** The input's name attribute. */\n @Prop({ reflect: true }) name = '';\n\n /** Set to true to add a clear button when the input is populated. */\n @Prop() clearable = false;\n\n /** Set the position of the icon */\n @Prop() iconPosition: 'left' | 'right' = 'left';\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n */\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /**\n * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n */\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /**\n * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n */\n @Prop() defaultTime?: string;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n */\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /**\n * Emitted when the timepicker's value changes\n */\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /**\n * Emitted when the timepicker's value changes, but debounced\n */\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /**\n * Emitted when the clear button is activated.\n */\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n /** Sets focus on the datepickers input. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /*\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n } else {\n // update value and popup value and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {\n this.value = '';\n } else if (this.inputElement != null) {\n this.inputElement.value = this.value;\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null || this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type || ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.inputElement != null) {\n this.inputElement.value = '';\n }\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n errorTextCount={this.errorTextCount}\n errorText={this.errorText}\n invalid={this.invalid}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,c as s,h as t}from"./p-JoG9I7EO.js";import{s as e}from"./p-BY6hIEFX.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{border-right:1px solid var(--six-color-web-rock-300)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const r=i=>{var s;return((s=i===null||i===void 0?void 0:i.tagName)===null||s===void 0?void 0:s.toLowerCase())==="six-sidebar-item-group"};const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show");this.sixAfterShow=s(this,"six-sidebar-after-show");this.sixHide=s(this,"six-sidebar-hide");this.sixAfterHide=s(this,"six-sidebar-after-hide");this.sixInitialFocus=s(this,"six-sidebar-initial-focus");this.willShow=false;this.willHide=false;this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;if(this.sidebar!=null){e(s,this.sidebar)}const t=i=>{var t;let e=s;while(i(e)!=null){e=i(e);if(r(e)){const i=(t=e===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector("six-details");if(i!=null){i.open=false}}}};t((i=>i===null||i===void 0?void 0:i.previousElementSibling));t((i=>i===null||i===void 0?void 0:i.nextElementSibling))}}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){var i;(i=this.sidebar)===null||i===void 0?void 0:i.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled||this.sidebar==null)return;this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){var i;const s=(i=this.sidebar)===null||i===void 0?void 0:i.querySelector("slot");const t=(s===null||s===void 0?void 0:s.assignedElements())||[];const e=[];while(t.length>0){const i=t.pop();if((i===null||i===void 0?void 0:i.shadowRoot)==null){continue}const s=i.shadowRoot.querySelectorAll("six-details");e.push(...s);const o=Array.from(i.children).filter(r);t.push(...o)}e.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow||this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){if(this.sidebar==null)return;const s=this.sidebar.querySelector("slot");const t=((s===null||s===void 0?void 0:s.assignedElements())||[]).flatMap((i=>{var s;const t=(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("six-details");if(t==null){return[]}return[t]}));if(i<0||i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){var s,t,e;const o=(s=this.sidebar)===null||s===void 0?void 0:s.querySelector("slot");const r=o===null||o===void 0?void 0:o.assignedElements();if(r==null){return}const n=r.findIndex((s=>(s===null||s===void 0?void 0:s.name)===i));const a=(e=(t=r.at(n))===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-details");await(a===null||a===void 0?void 0:a.show())}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as i,c as s,h as t}from"./p-JoG9I7EO.js";import{s as e}from"./p-BY6hIEFX.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{border-right:1px solid var(--six-color-web-rock-300)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const r=i=>{var s;return((s=i===null||i===void 0?void 0:i.tagName)===null||s===void 0?void 0:s.toLowerCase())==="six-sidebar-item-group"};const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show");this.sixAfterShow=s(this,"six-sidebar-after-show");this.sixHide=s(this,"six-sidebar-hide");this.sixAfterHide=s(this,"six-sidebar-after-hide");this.sixInitialFocus=s(this,"six-sidebar-initial-focus");this.willShow=false;this.willHide=false;this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;if(this.sidebar!=null){e(s,this.sidebar)}const t=i=>{var t;let e=s;while(i(e)!=null){e=i(e);if(r(e)){const i=(t=e===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector("six-details");if(i!=null){i.open=false}}}};t((i=>i===null||i===void 0?void 0:i.previousElementSibling));t((i=>i===null||i===void 0?void 0:i.nextElementSibling))}}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){var i;(i=this.sidebar)===null||i===void 0?void 0:i.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled||this.sidebar==null)return;this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){var i;const s=(i=this.sidebar)===null||i===void 0?void 0:i.querySelector("slot");const t=(s===null||s===void 0?void 0:s.assignedElements())||[];const e=[];while(t.length>0){const i=t.pop();if((i===null||i===void 0?void 0:i.shadowRoot)==null){continue}const s=i.shadowRoot.querySelectorAll("six-details");e.push(...s);const o=Array.from(i.children).filter(r);t.push(...o)}e.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow||this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){if(this.sidebar==null)return;const s=this.sidebar.querySelector("slot");const t=((s===null||s===void 0?void 0:s.assignedElements())||[]).flatMap((i=>{var s;const t=(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("six-details");if(t==null){return[]}return[t]}));if(i<0||i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){var s,t,e;const o=(s=this.sidebar)===null||s===void 0?void 0:s.querySelector("slot");const r=o===null||o===void 0?void 0:o.assignedElements();if(r==null){return}const n=r.findIndex((s=>(s===null||s===void 0?void 0:s.name)===i));const a=(e=(t=r.at(n))===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-details");await(a===null||a===void 0?void 0:a.show())}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{key:"11810533a79d5685e6ab768f0fbc8d9594d44de4",class:"six-sidebar"},t("div",{key:"6908b34bd6df174046145e9c4813278703e0d7cf",class:{sidebar__container:true,"sidebar--visible":this.isVisible,"sidebar--open":this.open,"sidebar--left":this.position==="left","sidebar--right":this.position==="right"},style:{width:this.width,[`margin-${this.position}`]:this.open?"0":`calc(1rem - ${this.width})`},ref:i=>this.sidebar=i,"aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd},t("slot",{key:"31557fda47113669da4d999a54f0074b37daffc8"})))}static get watchers(){return{open:["handleOpenChange"]}}};n.style=o;export{n as six_sidebar};
|
|
2
|
+
//# sourceMappingURL=p-21cbccb1.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as r,h as o,g as i}from"./p-JoG9I7EO.js";import{F as s}from"./p-Dg9366Gk.js";import{h as e}from"./p-j3oIB5oT.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--six-rating-color:var(--six-color-web-rock-500);--six-rating-color-active:var(--six-color-warning-700);--six-rating-color-disabled-opacity:0.4;display:block}.six-rating{display:inline-flex;flex-direction:row;user-select:none;cursor:pointer}.six-rating--readonly{cursor:unset}.six-rating--disabled{cursor:not-allowed;opacity:var(--six-rating-color-disabled-opacity)}.six-rating__star{color:var(--six-rating-color)}.six-rating__star--filled{color:var(--six-rating-color-active)}';const a=class{constructor(o){t(this,o);this.sixBlur=r(this,"six-rating-blur");this.sixChange=r(this,"six-rating-change");this.sixFocus=r(this,"six-rating-focus");this.name="";this.value=0;this.disabled=false;this.required=false;this.label="";this.errorText="";this.invalid=false;this.max=5;this.size="medium";this.readonly=false;this.helpText="";this.hasFocus=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.hoveredValue=this.value;this.ratingId=`rating-${++a.id}`;this.labelId=`rating-label-${a.id}`;this.errorTextId=`input-error-text-${a.id}`;this.handleSlotChange=()=>{this.hasLabelSlot=e(this.el,"label");this.hasErrorSlot=e(this.el,"error-text")};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit(this.value)};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=t=>{if(t.key==="ArrowLeft"){t.preventDefault();if(this.hoveredValue>0){this.hoveredValue=this.hoveredValue-1;this.value=this.hoveredValue}}if(t.key==="ArrowRight"){t.preventDefault();if(this.hoveredValue<this.max){this.hoveredValue=this.hoveredValue+1}}}}handleValueChange(){this.sixChange.emit(this.value)}connectedCallback(){var t;(t=this.el.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange)}disconnectedCallback(){var t;(t=this.el.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange)}renderStars(){return Array.from({length:this.max},((t,r)=>{const i=t=>{if(this.readonly||this.disabled){return}switch(t.type){case"mouseover":this.hoveredValue=r+1;break;case"mouseout":this.hoveredValue=this.value;break;case"click":this.value=this.hoveredValue;break}};return o("six-icon",{class:{"six-rating__star":true,"six-rating__star--filled":r<this.hoveredValue},filled:true,size:this.size,onMouseOver:i,onMouseOut:i,onClick:i},"star_rate")}))}render(){return o(s,{key:"ca3de959a1ffb915f0102ca6baa4a43c799d67ec",inputId:this.ratingId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,helpText:this.helpText,hasErrorTextSlot:this.hasErrorSlot,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},o("div",{key:"ef452485f9c3615f4caeaefce7f7034d7f64119f",part:"base",class:{"six-rating":true,"six-rating--readonly":this.readonly,"six-rating--disabled":this.disabled},role:"slider","aria-label":this.label,"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabindex:this.disabled?"-1":"0",onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown},this.renderStars(),o("input",{key:"187ec03d83c3b29fc5917a9abab324d40930b8f4",part:"input",id:this.ratingId,type:"hidden",max:this.max,min:0,name:this.name,value:this.value,disabled:this.disabled,required:this.required,role:"slider","aria-labelledby":this.labelId})))}get el(){return i(this)}static get watchers(){return{value:["handleValueChange"]}}};a.id=0;a.style=l;export{a as six_rating};
|
|
2
|
+
//# sourceMappingURL=p-39668d61.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixRatingCss","SixRating","constructor","hostRef","this","name","value","disabled","required","label","errorText","invalid","max","size","readonly","helpText","hasFocus","hasLabelSlot","hasErrorSlot","hoveredValue","ratingId","id","labelId","errorTextId","handleSlotChange","hasSlot","el","handleBlur","sixBlur","emit","handleFocus","sixFocus","handleKeyDown","event","key","preventDefault","handleValueChange","sixChange","connectedCallback","_a","shadowRoot","addEventListener","disconnectedCallback","removeEventListener","renderStars","Array","from","length","_","i","handleEvent","type","h","class","filled","onMouseOver","onMouseOut","onClick","render","FormControl","inputId","errorTextCount","hasErrorTextSlot","displayError","part","role","tabindex","onBlur","onFocus","onKeyDown","min"],"sources":["src/components/six-rating/six-rating.scss?tag=six-rating&encapsulation=shadow","src/components/six-rating/six-rating.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --six-rating-color: var(--six-color-web-rock-500);\n --six-rating-color-active: var(--six-color-warning-700);\n --six-rating-color-disabled-opacity: 0.4;\n\n display: block;\n}\n\n.six-rating {\n display: inline-flex;\n flex-direction: row;\n user-select: none;\n cursor: pointer;\n\n &--readonly {\n cursor: unset;\n }\n\n &--disabled {\n cursor: not-allowed;\n opacity: var(--six-rating-color-disabled-opacity);\n }\n\n &__star {\n color: var(--six-rating-color);\n\n &--filled {\n color: var(--six-rating-color-active);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n@Component({\n tag: 'six-rating',\n styleUrl: 'six-rating.scss',\n shadow: true,\n})\nexport class SixRating {\n @Element() el!: HTMLSixRatingElement;\n\n /** The rating's name attribute. */\n @Prop() name = '';\n\n /** The rating's value attribute. */\n @Prop({ mutable: true }) value: number = 0;\n\n /** Set to true to disable the rating. */\n @Prop() disabled = false;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** The label text. */\n @Prop() label: string = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** Maximum number of stars. Default is 5 */\n @Prop() max: number = 5;\n\n /** Size of the stars */\n @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n /** If its readonly */\n @Prop() readonly: boolean = false;\n\n /** The rating's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** Emitted when the control loses focus. */\n @Event({ eventName: 'six-rating-blur' }) sixBlur!: EventEmitter<number>;\n\n /** Emitted when the control's checked state changes. */\n @Event({ eventName: 'six-rating-change' }) sixChange!: EventEmitter<number>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-rating-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n // --\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() hoveredValue = this.value;\n\n private static id: number = 0;\n\n private ratingId = `rating-${++SixRating.id}`;\n private labelId = `rating-label-${SixRating.id}`;\n private errorTextId = `input-error-text-${SixRating.id}`;\n\n @Watch('value')\n handleValueChange() {\n this.sixChange.emit(this.value);\n }\n\n connectedCallback() {\n this.el.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n this.el.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.el, 'label');\n this.hasErrorSlot = hasSlot(this.el, 'error-text');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.value);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n if (this.hoveredValue > 0) {\n this.hoveredValue = this.hoveredValue - 1;\n this.value = this.hoveredValue;\n }\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n if (this.hoveredValue < this.max) {\n this.hoveredValue = this.hoveredValue + 1;\n }\n }\n };\n\n private renderStars() {\n return Array.from({ length: this.max }, (_, i) => {\n const handleEvent = (event: Event) => {\n if (this.readonly || this.disabled) {\n return;\n }\n switch (event.type) {\n case 'mouseover':\n this.hoveredValue = i + 1;\n break;\n case 'mouseout':\n this.hoveredValue = this.value;\n break;\n case 'click':\n this.value = this.hoveredValue;\n break;\n }\n };\n\n return (\n <six-icon\n class={{\n 'six-rating__star': true,\n 'six-rating__star--filled': i < this.hoveredValue,\n }}\n filled\n size={this.size}\n onMouseOver={handleEvent}\n onMouseOut={handleEvent}\n onClick={handleEvent}\n >\n star_rate\n </six-icon>\n );\n });\n }\n\n render() {\n return (\n <FormControl\n inputId={this.ratingId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n helpText={this.helpText}\n hasErrorTextSlot={this.hasErrorSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n 'six-rating': true,\n 'six-rating--readonly': this.readonly,\n 'six-rating--disabled': this.disabled,\n }}\n role=\"slider\"\n aria-label={this.label}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabindex={this.disabled ? '-1' : '0'}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n >\n {this.renderStars()}\n\n <input\n part=\"input\"\n id={this.ratingId}\n type=\"hidden\"\n max={this.max}\n min={0}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n role=\"slider\"\n aria-labelledby={this.labelId}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as r,g as o}from"./p-JoG9I7EO.js";import{F as a}from"./p-Dg9366Gk.js";import{h as i}from"./p-j3oIB5oT.js";import{E as s}from"./p-C4h4qpGl.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:100%;display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;height:calc(var(--height) - 2 * var(--six-border-width));font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change");this.sixInput=e(this,"six-textarea-input");this.sixFocus=e(this,"six-textarea-focus");this.sixBlur=e(this,"six-textarea-blur");this.inputId=`textarea-${++n}`;this.labelId=`textarea-label-${n}`;this.helpTextId=`textarea-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.size="medium";this.name="";this.value="";this.helpText="";this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.required=false;this.label="";this.errorText="";this.invalid=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.handleChange=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.sixChange.emit()}};this.handleInput=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleSlotChange=()=>{this.hasLabelSlot=i(this.host,"label");this.hasHelpTextSlot=i(this.host,"help-text");this.hasErrorTextSlot=i(this.host,"error-text")}}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){this.setTextareaHeight()}handleValueChange(){this.value=this.getValue();if(this.nativeTextarea!=null){if(this.nativeTextarea.value!==this.value){this.nativeTextarea.value=this.value}}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-textarea-input","input",this.host);this.eventListeners.forward("six-textarea-change","change",this.host);this.eventListeners.forward("six-textarea-focus","focus",this.host);this.eventListeners.forward("six-textarea-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();if(this.nativeTextarea!=null){this.resizeObserver.observe(this.nativeTextarea)}}disconnectedCallback(){var t;if(this.nativeTextarea!=null){this.resizeObserver.unobserve(this.nativeTextarea)}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;(e=this.nativeTextarea)===null||e===void 0?void 0:e.focus(t)}async removeFocus(){var t;(t=this.nativeTextarea)===null||t===void 0?void 0:t.blur()}async select(){var t;return(t=this.nativeTextarea)===null||t===void 0?void 0:t.select()}async setSelectionRange(t,e,r="none"){var o;return(o=this.nativeTextarea)===null||o===void 0?void 0:o.setSelectionRange(t,e,r)}async setRangeText(t,e,r,o="preserve"){if(this.nativeTextarea==null)return;this.nativeTextarea.setRangeText(t,e,r,o);if(this.getValue()!==this.nativeTextarea.value){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}setTextareaHeight(){if(this.nativeTextarea==null)return;if(this.resize==="auto"){this.nativeTextarea.style.height="auto";this.nativeTextarea.style.height=this.nativeTextarea.scrollHeight+"px"}else{this.nativeTextarea.style.height=undefined}}getValue(){var t;return((t=this.value)!==null&&t!==void 0?t:"").toString()}render(){return r(a,{key:"e535cb9819c9f78361b451b106349d44aa13bc25",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{key:"5cf703bd10753ce53474c724839745a24769f843",part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":this.getValue().length===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{key:"1a1fc11b8ae91f3c404670a05ea0cc9e0598fa80",part:"textarea",ref:t=>this.nativeTextarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.getValue(),autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_textarea};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as r,g as o}from"./p-JoG9I7EO.js";import{F as i}from"./p-Dg9366Gk.js";import{h as a}from"./p-j3oIB5oT.js";import{E as s}from"./p-C4h4qpGl.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:100%;display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;height:calc(var(--height) - 2 * var(--six-border-width));font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change");this.sixInput=e(this,"six-textarea-input");this.sixFocus=e(this,"six-textarea-focus");this.sixBlur=e(this,"six-textarea-blur");this.inputId=`textarea-${++n}`;this.labelId=`textarea-label-${n}`;this.helpTextId=`textarea-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.size="medium";this.name="";this.value="";this.helpText="";this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.required=false;this.label="";this.errorText="";this.invalid=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.handleChange=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.sixChange.emit()}};this.handleInput=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleSlotChange=()=>{this.hasLabelSlot=a(this.host,"label");this.hasHelpTextSlot=a(this.host,"help-text");this.hasErrorTextSlot=a(this.host,"error-text")}}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){this.setTextareaHeight()}handleValueChange(){this.value=this.getValue();if(this.nativeTextarea!=null){if(this.nativeTextarea.value!==this.value){this.nativeTextarea.value=this.value}}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-textarea-input","input",this.host);this.eventListeners.forward("six-textarea-change","change",this.host);this.eventListeners.forward("six-textarea-focus","focus",this.host);this.eventListeners.forward("six-textarea-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();if(this.nativeTextarea!=null){this.resizeObserver.observe(this.nativeTextarea)}}disconnectedCallback(){var t;if(this.nativeTextarea!=null){this.resizeObserver.unobserve(this.nativeTextarea)}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;(e=this.nativeTextarea)===null||e===void 0?void 0:e.focus(t)}async removeFocus(){var t;(t=this.nativeTextarea)===null||t===void 0?void 0:t.blur()}async select(){var t;return(t=this.nativeTextarea)===null||t===void 0?void 0:t.select()}async setSelectionRange(t,e,r="none"){var o;return(o=this.nativeTextarea)===null||o===void 0?void 0:o.setSelectionRange(t,e,r)}async setRangeText(t,e,r,o="preserve"){if(this.nativeTextarea==null)return;this.nativeTextarea.setRangeText(t,e,r,o);if(this.getValue()!==this.nativeTextarea.value){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}setTextareaHeight(){if(this.nativeTextarea==null)return;if(this.resize==="auto"){this.nativeTextarea.style.height="auto";this.nativeTextarea.style.height=this.nativeTextarea.scrollHeight+"px"}else{this.nativeTextarea.style.height=undefined}}getValue(){var t;return((t=this.value)!==null&&t!==void 0?t:"").toString()}render(){return r(i,{key:"82dacccbeabf732b3d49738f0b5b9d725938014d",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{key:"88ddaeed09431fd06608350652de1280e729d44d",part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":this.getValue().length===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{key:"59838f0a6a739c7f6ed950f7ec73c228571e201a",part:"textarea",ref:t=>this.nativeTextarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.getValue(),autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_textarea};
|
|
2
|
+
//# sourceMappingURL=p-6c8182fa.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,c as e,h as t,g as s}from"./p-JoG9I7EO.js";import{h as l,g as a}from"./p-j3oIB5oT.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:"header" "middle" "footer"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}';const r=class{constructor(t){i(this,t);this.sixTileClose=e(this,"six-tile-closed");this.sixTileSelected=e(this,"six-tile-selected");this.label="";this.closeable=true;this.elevated=false;this.disableTooltip=true;this.disabled=false;this.size="medium";this.visible=true;this.hasIconSlot=false;this.hasLabelSlot=false;this.handleSlotChange=()=>{this.hasIconSlot=l(this.host,"icon");this.hasLabelSlot=l(this.host,"label");if(this.hasIconSlot){const i=a(this.host,"icon");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}if(this.hasLabelSlot){const i=a(this.host,"label");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}};this.handleCloseClickEvent=()=>{this.visible=false;this.sixTileClose.emit()};this.handleClickEvent=()=>{this.sixTileSelected.emit()}}async hide(){this.visible=false}async show(){this.visible=true}componentWillLoad(){this.handleSlotChange()}render(){return t("six-tooltip",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as i,c as e,h as t,g as s}from"./p-JoG9I7EO.js";import{h as l,g as a}from"./p-j3oIB5oT.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:"header" "middle" "footer"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}';const r=class{constructor(t){i(this,t);this.sixTileClose=e(this,"six-tile-closed");this.sixTileSelected=e(this,"six-tile-selected");this.label="";this.closeable=true;this.elevated=false;this.disableTooltip=true;this.disabled=false;this.size="medium";this.visible=true;this.hasIconSlot=false;this.hasLabelSlot=false;this.handleSlotChange=()=>{this.hasIconSlot=l(this.host,"icon");this.hasLabelSlot=l(this.host,"label");if(this.hasIconSlot){const i=a(this.host,"icon");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}if(this.hasLabelSlot){const i=a(this.host,"label");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}};this.handleCloseClickEvent=()=>{this.visible=false;this.sixTileClose.emit()};this.handleClickEvent=()=>{this.sixTileSelected.emit()}}async hide(){this.visible=false}async show(){this.visible=true}componentWillLoad(){this.handleSlotChange()}render(){return t("six-tooltip",{key:"165474a4301eff8d60788826d0378f33640476f4",disabled:this.disableTooltip||this.label==="",content:this.label},t("div",{key:"ae643873a589d648887ab54c614be1cae1e01a95",part:"base",class:{tile:true,"tile--visible":this.visible,"tile--small":this.size==="small","tile--medium":this.size==="medium","tile--large":this.size==="large","tile--elevated":this.elevated}},t("div",{key:"b1fc1fabbf6f853611c7e7401bc007ba23a80985",part:"header",class:"tile__header"},t("six-icon-button",{key:"3c8241f94b14ddbc2aeded4a7471e003112850bf",class:{"tile__header--hidden":!this.closeable},name:"close",size:d(this.size),onClick:this.handleCloseClickEvent})),t("div",{key:"334757a44525044c0d7f78fccf55c9076267c4ff",part:"body",class:"tile__body"},this.iconName&&t("six-icon",{key:"ec0904b8125e608d4d1f5ebeeb1b1fd8f8202a18",onClick:this.handleClickEvent,size:h(this.size)},this.iconName),this.hasIconSlot&&t("slot",{key:"5c4d950efc7de4268da7285024c0900066020c19",name:"icon"})),t("div",{key:"145edac16dcbf511d60d4f044bae7bdd397d939e",part:"footer",class:{"tile__footer--small":this.size==="small","tile__footer--medium":this.size==="medium","tile__footer--large":this.size==="large"}},this.label&&t("div",{key:"e11277aca9e4b1d30050f582fef25f4b77815bfd",class:{".label__footer":true},onClick:this.handleClickEvent},this.label),this.hasLabelSlot&&t("slot",{key:"39e4128ecdb2166b5fba7955a5370e59beae9801",name:"label"}))))}get host(){return s(this)}};const d=i=>({small:"xxSmall",medium:"medium",large:"medium"}[i]);const h=i=>({small:"xLarge",medium:"xxLarge",large:"xxxLarge"}[i]);r.style=o;export{r as six_tile};
|
|
2
|
+
//# sourceMappingURL=p-83b35622.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as o,h as i,H as r,g as s}from"./p-JoG9I7EO.js";import{P as e}from"./p-kHci8ddv.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}';let p=0;const n=class{constructor(i){t(this,i);this.sixShow=o(this,"six-tooltip-show");this.sixAfterShow=o(this,"six-tooltip-after-show");this.sixHide=o(this,"six-tooltip-hide");this.sixAfterHide=o(this,"six-tooltip-after-hide");this.componentId=`tooltip-${++p}`;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{const t=this.target;const o=this.getTarget();if(o!==t){if(t!=null){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",this.componentId)}}}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){if(this.tooltipPositioner==null)return;this.target=this.getTarget();this.popoverHelper=new e(this.target,this.tooltipPositioner,{strategy:"fixed"});this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popoverHelper!=null){this.popoverHelper.destroy()}this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)}async show(){var t;if(this.isVisible||this.disabled){return}const o=this.sixShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;(t=this.popoverHelper)===null||t===void 0?void 0:t.show()}async hide(){var t;if(!this.isVisible||this.disabled){return}const o=this.sixHide.emit();if(o.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;(t=this.popoverHelper)===null||t===void 0?void 0:t.hide()}getTarget(){const t=[...this.host.children].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(t==null){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){if(this.popoverHelper==null)return;this.popoverHelper.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.sixAfterHide.emit(),onAfterShow:()=>this.sixAfterShow.emit()})}render(){return i(r,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as o,h as i,H as r,g as s}from"./p-JoG9I7EO.js";import{P as e}from"./p-kHci8ddv.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}';let p=0;const n=class{constructor(i){t(this,i);this.sixShow=o(this,"six-tooltip-show");this.sixAfterShow=o(this,"six-tooltip-after-show");this.sixHide=o(this,"six-tooltip-hide");this.sixAfterHide=o(this,"six-tooltip-after-hide");this.componentId=`tooltip-${++p}`;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{const t=this.target;const o=this.getTarget();if(o!==t){if(t!=null){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",this.componentId)}}}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){if(this.tooltipPositioner==null)return;this.target=this.getTarget();this.popoverHelper=new e(this.target,this.tooltipPositioner,{strategy:"fixed"});this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popoverHelper!=null){this.popoverHelper.destroy()}this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)}async show(){var t;if(this.isVisible||this.disabled){return}const o=this.sixShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;(t=this.popoverHelper)===null||t===void 0?void 0:t.show()}async hide(){var t;if(!this.isVisible||this.disabled){return}const o=this.sixHide.emit();if(o.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;(t=this.popoverHelper)===null||t===void 0?void 0:t.hide()}getTarget(){const t=[...this.host.children].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(t==null){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){if(this.popoverHelper==null)return;this.popoverHelper.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.sixAfterHide.emit(),onAfterShow:()=>this.sixAfterShow.emit()})}render(){return i(r,{key:"749a6d5edac438b4ff3bd9a34402823156417b37",onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{key:"f505a21b6cfa2362537b54a7c2a5d92750a688b5",onSlotchange:this.handleSlotChange}),i("div",{key:"4c38a6ff56ea7b6a121e59fd406728d9af71712e",ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{key:"1df2f66d1bbae1aeb864d23d91e9094ab950ff79",part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{key:"cc4a2c0d99ae6f16058ac19cef27b7dd66c33bed",name:"content"},this.content))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};n.style=a;export{n as six_tooltip};
|
|
2
|
+
//# sourceMappingURL=p-c8fbf085.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as a,g as t}from"./p-JoG9I7EO.js";const i=":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";const o=class{constructor(a){e(this,a);this.padded=true;this.stage=null;this.version=""}render(){return a("host",{key:"574331a30ddbdff3fb37129ec8e46c873bc1832e",class:"six-root"},a("header",{key:"f70f24b925ba9a88156d46a6481f6ab3f415bdad",part:"header"},this.stage&&a("six-stage-indicator",{key:"4fe5f33c59e77fcd1cae71afa5ccdd227fbd3d74",stage:this.stage},this.version),a("slot",{key:"92fcdbb991e5593d0f5e602a3dc72b3bc95ce415",name:"header"})),a("nav",{key:"d26e8e840ae344dcda1e81879e50f45981ad0035",class:"six-root__left-sidebar",part:"left-sidebar"},a("slot",{key:"da2e4b7ea1338e68970364d279753b7dd9ce4716",name:"left-sidebar"})),a("main",{key:"13c283e1e1150c3a6f0cc76feed50889023c8bfc",part:"main"},a("div",{key:"0fd0a46e4d68dc7af4f4444de6cbd0cb68e3098a",class:{"six-root__container":true,"six-root__container--padded":this.padded},part:"container"},a("slot",{key:"5591878851514068d3ce5751af12fa86aa6449ca",name:"main"})),a("div",{key:"fe14e87f84217215d03545b5094f462981124093",class:"six-root__footer"},a("slot",{key:"44cd8020e7ba2ee5a4bfb50a8e9f46cac4c6010f",name:"footer"}))),a("nav",{key:"a26ca2c92e7e0ef955bea7796270a5d64e9c1aec",class:"six-root__right-sidebar",part:"right-sidebar"},a("slot",{key:"8d72471d1f4e06722eed5042dd8e4a5f9141b403",name:"right-sidebar"})))}get host(){return t(this)}};o.style=i;export{o as six_root};
|
|
2
|
+
//# sourceMappingURL=p-d7c7398d.entry.js.map
|