@agorapulse/ui-components 22.2.2 → 22.2.4
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/agorapulse-ui-components-22.2.4.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +9 -2
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/package.json +2 -2
- package/agorapulse-ui-components-22.2.2.tgz +0 -0
|
Binary file
|
|
@@ -91,13 +91,13 @@ class ButtonComponent {
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading() || disabled() || null" } }, providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n #button\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n [class]=\"buttonClasses()\"\n [disabled]=\"disabled() && !locked()\"\n [attr.name]=\"name()\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled()?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n @if (loading() && !locked()) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked()) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"feature-lock\"\n size=\"sm\" />\n </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
94
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading() || disabled() || null" } }, providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n #button\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n [class]=\"buttonClasses()\"\n [disabled]=\"disabled() && !locked()\"\n [attr.name]=\"name()\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled()?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n @if (loading() && !locked()) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked()) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"feature-lock\"\n size=\"sm\" />\n </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus-visible:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus-visible:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
95
95
|
}
|
|
96
96
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
97
97
|
type: Component,
|
|
98
98
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', imports: [SymbolComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }], host: {
|
|
99
99
|
'[attr.disabled]': 'loading() || disabled() || null',
|
|
100
|
-
}, template: "<button\n #button\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n [class]=\"buttonClasses()\"\n [disabled]=\"disabled() && !locked()\"\n [attr.name]=\"name()\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled()?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n @if (loading() && !locked()) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked()) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"feature-lock\"\n size=\"sm\" />\n </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"] }]
|
|
100
|
+
}, template: "<button\n #button\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n [class]=\"buttonClasses()\"\n [disabled]=\"disabled() && !locked()\"\n [attr.name]=\"name()\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled()?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n @if (loading() && !locked()) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked()) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"feature-lock\"\n size=\"sm\" />\n </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:var(--comp-button-border-radius);padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media(hover:hover){ap-button button:focus-visible:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.mermaid{background:linear-gradient(90deg,#578fff,#df52ff);color:var(--ref-color-grey-100);border:none;border-radius:var(--ref-border-radius-sm);position:relative;z-index:1}ap-button button.mermaid:after{content:\"\";position:absolute;inset:1px;background:var(--ref-color-white);border-radius:calc(var(--ref-border-radius-sm) - 1px);z-index:-1;pointer-events:none}ap-button button.mermaid ng-content,ap-button button.mermaid ap-symbol,ap-button button.mermaid .loading-bar{position:relative;z-index:1}ap-button button.mermaid:first-line{position:relative;z-index:1}ap-button button.mermaid:hover:after{background:var(--ref-color-mermaid-10)}ap-button button.mermaid:active:not(:disabled):after{background:var(--ref-color-mermaid-20)}@media(hover:hover){ap-button button.mermaid:focus-visible:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.mermaid:disabled{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid:disabled:after{background:var(--ref-color-white)}ap-button button.mermaid:disabled ap-symbol{opacity:.4}ap-button button.mermaid:disabled{color:var(--ref-color-grey-20)}ap-button button.mermaid.loading{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from40) 0%,var(--ref-color-mermaid-gradient-to40) 100%)}ap-button button.mermaid.loading:after{background:var(--ref-color-white)}ap-button button.mermaid.loading ap-symbol{opacity:.4}ap-button button.mermaid.loading{color:var(--ref-color-grey-40)}ap-button button.mermaid .loading-bar{background:linear-gradient(90deg,var(--ref-color-mermaid-gradient-from) 0%,var(--ref-color-mermaid-gradient-to) 100%);position:absolute;z-index:2}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-80)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.red{border-color:var(--ref-color-red-60);color:var(--ref-color-red-100)}ap-button button.stroked.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.stroked.red:hover{border-color:var(--ref-color-red-80)}ap-button button.stroked.red:active:not(:disabled){border-color:var(--ref-color-red-100)}ap-button button.stroked.red:focus:not(:disabled):not(:active){border-color:var(--ref-color-red-60)}ap-button button.stroked.red:disabled{border-color:var(--ref-color-red-20);color:var(--ref-color-red-20)}ap-button button.stroked.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.stroked.red.loading{border-color:var(--ref-color-red-20);color:var(--ref-color-red-40)}ap-button button.stroked.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.stroked.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading:not(.locked){color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading:not(.locked) ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading:not(.locked){color:var(--ref-color-red-40)}ap-button button.ghost.red.loading:not(.locked) ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.ghost.green{color:var(--ref-color-green-100)}ap-button button.ghost.green ap-symbol{color:var(--ref-color-green-100)}ap-button button.ghost.green:hover{background-color:var(--ref-color-green-10)}ap-button button.ghost.green:active:not(:disabled){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:focus:not(:disabled):not(:active){background-color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled{color:var(--ref-color-green-20)}ap-button button.ghost.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-button button.ghost.green.loading:not(.locked){color:var(--ref-color-green-40)}ap-button button.ghost.green.loading:not(.locked) ap-symbol{color:var(--ref-color-green-40)}ap-button button.ghost.green .loading-bar{background-color:var(--ref-color-green-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80)}ap-button button.locked ap-symbol{color:var(--ref-color-purple-80)}ap-button button.locked:hover{background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-40)}ap-button button.locked:active:not(:disabled){background-color:var(--ref-color-purple-40);border-color:var(--ref-color-purple-60)}ap-button button.locked:focus:not(:disabled):not(:active){background-color:var(--ref-color-purple-20);border-color:var(--ref-color-purple-20)}ap-button button.locked:disabled{color:var(--ref-color-purple-)}ap-button button.locked:disabled ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked){color:var(--ref-color-purple-)}ap-button button.locked.loading:not(.locked) ap-symbol{color:var(--ref-color-purple-)}ap-button button.locked .loading-bar{background-color:var(--ref-color-purple-)}ap-button button.locked{border:1px solid var(--ref-color-purple-20)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"] }]
|
|
101
101
|
}], ctorParameters: () => [], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], menuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTrigger", required: false }] }], symbolPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolPosition", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], click: [{ type: i0.Output, args: ["click"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], onSpaceKeyUp: [{
|
|
102
102
|
type: HostListener,
|
|
103
103
|
args: ['window:keyup.space', ['$event']]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import { AP_INTERACTIVE_ELEMENT, ApInteractiveElement, BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n forwardRef,\n HostListener,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonConfig =\n | { style: 'primary'; color: 'orange' | 'blue' }\n | { style: 'secondary'; color: 'orange' | 'blue' }\n | { style: 'stroked'; color: 'grey' | 'blue' | 'red' }\n | { style: 'stroked-transparent'; color: 'grey' | 'blue' | 'red' }\n | { style: 'ghost'; color: 'grey' | 'blue' | 'red' | 'green' }\n | { style: 'mermaid'; color?: never };\n\nexport const defaultButtonConfig: ButtonConfig = {\n style: 'primary',\n color: 'orange',\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-button',\n styleUrls: ['./button.component.scss'],\n imports: [SymbolComponent, MatMenuModule],\n templateUrl: './button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }],\n host: {\n '[attr.disabled]': 'loading() || disabled() || null',\n },\n})\nexport class ButtonComponent implements ApInteractiveElement {\n readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n\n /** The host is a wrapper: this is the element that takes focus and carries the ARIA state. */\n interactiveElement(): HTMLElement {\n return this.buttonElement().nativeElement;\n }\n\n ariaLabel = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n name = input<string>();\n form = input<string>();\n config = input(defaultButtonConfig, { transform: (value?: ButtonConfig) => value ?? defaultButtonConfig });\n loading = input(false, { transform: booleanAttribute });\n locked = input(false, { transform: booleanAttribute });\n menuTrigger = input<MatMenuPanel | null>(null);\n symbolPosition = input<'left' | 'right'>('right');\n symbolId = input<agorapulseSymbol>();\n\n menuOpened = output<void>();\n menuClosed = output<void>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n click = output<MouseEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n focus = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n blur = output<FocusEvent>();\n\n buttonClasses = computed(() => {\n const cfg = this.config();\n const isLocked = this.locked();\n\n return {\n inverse: this.symbolPosition() === 'left',\n ...(isLocked\n ? { locked: true }\n : {\n // Style\n [cfg.style]: true,\n transparent: cfg.style === 'stroked-transparent',\n stroked: cfg.style === 'stroked' || cfg.style === 'stroked-transparent',\n // Color\n ...(cfg.color ? { [cfg.color]: true } : {}),\n // Loading state\n loading: this.loading(),\n }),\n };\n });\n\n focused: boolean = false;\n\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n onClickHandle($event: MouseEvent): void {\n if (this.disabled() || this.loading()) {\n return;\n }\n $event.stopImmediatePropagation();\n this.click.emit($event);\n this.buttonElement().nativeElement.blur();\n this.blur.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.focused = false;\n this.blur.emit($event);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focused = true;\n this.focus.emit($event);\n }\n\n @HostListener('window:keyup.space', ['$event'])\n onSpaceKeyUp(event: Event) {\n if (this.focused && !this.disabled() && !this.loading()) {\n event.preventDefault();\n this.buttonElement().nativeElement.click();\n }\n }\n}\n","<button\n #button\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n [class]=\"buttonClasses()\"\n [disabled]=\"disabled() && !locked()\"\n [attr.name]=\"name()\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled()?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n @if (loading() && !locked()) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked()) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"feature-lock\"\n size=\"sm\" />\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import { AP_INTERACTIVE_ELEMENT, ApInteractiveElement, BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n forwardRef,\n HostListener,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonConfig =\n | { style: 'primary'; color: 'orange' | 'blue' }\n | { style: 'secondary'; color: 'orange' | 'blue' }\n | { style: 'stroked'; color: 'grey' | 'blue' | 'red' }\n | { style: 'stroked-transparent'; color: 'grey' | 'blue' | 'red' }\n | { style: 'ghost'; color: 'grey' | 'blue' | 'red' | 'green' }\n | { style: 'mermaid'; color?: never };\n\nexport const defaultButtonConfig: ButtonConfig = {\n style: 'primary',\n color: 'orange',\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-button',\n styleUrls: ['./button.component.scss'],\n imports: [SymbolComponent, MatMenuModule],\n templateUrl: './button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n providers: [{ provide: AP_INTERACTIVE_ELEMENT, useExisting: forwardRef(() => ButtonComponent) }],\n host: {\n '[attr.disabled]': 'loading() || disabled() || null',\n },\n})\nexport class ButtonComponent implements ApInteractiveElement {\n readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n\n /** The host is a wrapper: this is the element that takes focus and carries the ARIA state. */\n interactiveElement(): HTMLElement {\n return this.buttonElement().nativeElement;\n }\n\n ariaLabel = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n name = input<string>();\n form = input<string>();\n config = input(defaultButtonConfig, { transform: (value?: ButtonConfig) => value ?? defaultButtonConfig });\n loading = input(false, { transform: booleanAttribute });\n locked = input(false, { transform: booleanAttribute });\n menuTrigger = input<MatMenuPanel | null>(null);\n symbolPosition = input<'left' | 'right'>('right');\n symbolId = input<agorapulseSymbol>();\n\n menuOpened = output<void>();\n menuClosed = output<void>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n click = output<MouseEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n focus = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n blur = output<FocusEvent>();\n\n buttonClasses = computed(() => {\n const cfg = this.config();\n const isLocked = this.locked();\n\n return {\n inverse: this.symbolPosition() === 'left',\n ...(isLocked\n ? { locked: true }\n : {\n // Style\n [cfg.style]: true,\n transparent: cfg.style === 'stroked-transparent',\n stroked: cfg.style === 'stroked' || cfg.style === 'stroked-transparent',\n // Color\n ...(cfg.color ? { [cfg.color]: true } : {}),\n // Loading state\n loading: this.loading(),\n }),\n };\n });\n\n focused: boolean = false;\n\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n onClickHandle($event: MouseEvent): void {\n if (this.disabled() || this.loading()) {\n return;\n }\n $event.stopImmediatePropagation();\n this.click.emit($event);\n this.buttonElement().nativeElement.blur();\n this.blur.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.focused = false;\n this.blur.emit($event);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focused = true;\n this.focus.emit($event);\n }\n\n @HostListener('window:keyup.space', ['$event'])\n onSpaceKeyUp(event: Event) {\n if (this.focused && !this.disabled() && !this.loading()) {\n event.preventDefault();\n this.buttonElement().nativeElement.click();\n }\n }\n}\n","<button\n #button\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n [class]=\"buttonClasses()\"\n [disabled]=\"disabled() && !locked()\"\n [attr.name]=\"name()\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"disabled()?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n @if (loading() && !locked()) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked()) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"feature-lock\"\n size=\"sm\" />\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -444,11 +444,11 @@ class DatepickerComponent {
|
|
|
444
444
|
this.changeDetectorRef.detectChanges();
|
|
445
445
|
}
|
|
446
446
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
447
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;background:var(--ref-color-grey-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: DatepickerMonthPickerComponent, selector: "ap-datepicker-month-picker", inputs: ["month", "year", "locale", "minDate", "maxDate"], outputs: ["monthSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
447
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, dateLimit: { classPropertyName: "dateLimit", publicName: "dateLimit", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus:not(:disabled):not(:active):not(.loading){outline:none}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus-visible:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus-visible:not(:disabled):not(:active):not(.loading){box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: DatepickerMonthPickerComponent, selector: "ap-datepicker-month-picker", inputs: ["month", "year", "locale", "minDate", "maxDate"], outputs: ["monthSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
448
448
|
}
|
|
449
449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
450
450
|
type: Component,
|
|
451
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [ButtonComponent, DatepickerMonthPickerComponent, DropdownTriggerDirective, IconButtonComponent, NgxDaterangepickerMd], template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;background:var(--ref-color-grey-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
|
|
451
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [ButtonComponent, DatepickerMonthPickerComponent, DropdownTriggerDirective, IconButtonComponent, NgxDaterangepickerMd], template: "<div\n class=\"custom-calendar\"\n [class.single-month]=\"mode !== DatepickerMode.Range\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <ap-icon-button\n symbolId=\"arrow-left\"\n ariaLabel=\"Previous month\"\n (onClick)=\"onPreviousMonth()\" />\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"leftMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #leftMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.leftCalendar.month.month()\"\n [year]=\"datepickerRef.leftCalendar.month.year()\"\n (monthSelected)=\"onLeftMonthPicked($event)\" />\n <!-- Outside Range a single month is rendered, so both arrows frame its header. -->\n @if (mode !== DatepickerMode.Range) {\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n }\n </div>\n }\n @if (mode === DatepickerMode.Range && datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <ap-button\n class=\"month-label\"\n symbolId=\"chevron-down\"\n [apDropdownTrigger]=\"rightMonthPicker\"\n [config]=\"monthTriggerConfig\">\n <span class=\"month-label-text\">{{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}</span>\n </ap-button>\n <ap-datepicker-month-picker\n #rightMonthPicker\n [locale]=\"locale\"\n [maxDate]=\"maxDateValue\"\n [minDate]=\"minDateValue\"\n [month]=\"datepickerRef.rightCalendar.month.month()\"\n [year]=\"datepickerRef.rightCalendar.month.year()\"\n (monthSelected)=\"onRightMonthPicked($event)\" />\n <ap-icon-button\n symbolId=\"arrow-right\"\n ariaLabel=\"Next month\"\n (onClick)=\"onNextMonth()\" />\n </div>\n }\n </div>\n <!--\n `showDropdowns` is on not for its own selects \u2014 those render into the header row we hide \u2014\n but because the vendor only maintains `calendarVariables[side].dropdowns` while it is, and\n that is what `monthOrYearChanged` reads to move a calendar.\n -->\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!hasPresets\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [dateLimit]=\"dateLimit() ?? 0\"\n [linkedCalendars]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"vendorRanges\"\n [showCustomRangeLabel]=\"false\"\n [showDropdowns]=\"true\"\n [singleDatePicker]=\"mode !== DatepickerMode.Range\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["::ng-deep .custom-calendar{display:flex;flex-direction:column;width:max-content;height:fit-content;border-radius:var(--ref-border-radius-md);background-color:var(--ref-color-white);font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar.single-month .md-drppicker .calendar.right{padding-left:0}::ng-deep .custom-calendar.single-month .custom-header{width:224px}::ng-deep .custom-calendar.single-month .custom-header .month-header:first-child{padding-right:0}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;width:calc(14 * 32px + 2 * var(--ref-spacing-sm) + 1px);height:var(--comp-icon-button-height);gap:calc(2 * var(--ref-spacing-sm) + 1px);color:var(--ref-color-grey-100);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus:not(:disabled):not(:active):not(.loading){outline:none}::ng-deep .custom-calendar .custom-header ap-icon-button button:focus-visible:not(.disabled):not(:active),::ng-deep .custom-calendar .custom-header .month-label button:focus-visible:not(:disabled):not(:active):not(.loading){box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .custom-header .month-header{display:flex;width:224px;align-items:center;height:var(--comp-icon-button-height)}::ng-deep .custom-calendar .custom-header .month-header:first-child{padding-right:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header:nth-child(2){padding-left:var(--comp-icon-button-width)}::ng-deep .custom-calendar .custom-header .month-header .month-label{display:flex;flex:1;min-width:0;justify-content:center;--comp-button-padding-vertical: var(--ref-spacing-xxs)}::ng-deep .custom-calendar .custom-header .month-header .month-label button{min-width:0}::ng-deep .custom-calendar .custom-header .month-header .month-label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .custom-calendar .md-drppicker{display:flex!important;width:unset;height:auto;margin:0;padding:0;overflow:visible;box-shadow:none;z-index:0;font-family:var(--sys-text-style-body-font-family)}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0}::ng-deep .custom-calendar .md-drppicker .calendar.left{order:1;float:none;padding:0 var(--ref-spacing-sm) 0 0;border-right:1px solid var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar.right{order:2;float:none;padding:0 0 0 var(--ref-spacing-sm)}::ng-deep .custom-calendar .md-drppicker .ranges{order:3;float:none!important;box-sizing:content-box;width:130px;max-width:none;height:calc(var(--comp-icon-button-height) + 7 * 32px + 8 * var(--ref-spacing-xxxs));margin-top:calc(-1 * var(--comp-icon-button-height));margin-left:var(--ref-spacing-sm);padding:0 0 0 var(--ref-spacing-sm);border-left:1px solid var(--ref-color-grey-10);overflow-y:auto}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:0}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{display:flex;align-items:center;min-height:var(--sys-button-height);padding:var(--ref-spacing-xxxs) var(--ref-spacing-xs);border-radius:var(--ref-border-radius-sm);background:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);transition:background-color var(--ref-animation-short) ease,color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){background:var(--ref-color-grey-10);color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:active:not(.active):not(:disabled){background:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{background:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{background:none;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:224px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 var(--ref-spacing-xxxs);height:auto}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:normal}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{height:32px;border:none;color:var(--ref-color-grey-100);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);text-transform:capitalize}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{height:32px;padding:0;border:none;border-radius:0;opacity:1;color:var(--ref-color-grey-100);transition:background-color var(--ref-animation-short) ease}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0;border:none;border-radius:0;background-color:transparent;color:inherit;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):hover{border-radius:var(--ref-border-radius-sm);background-color:var(--ref-color-grey-10)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.off):not(.in-range):not(.hovered-end):active{background-color:var(--ref-color-grey-20)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:transparent;color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.disabled{color:var(--ref-color-grey-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive:not(.off){background-color:transparent;color:var(--ref-color-grey-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off):not(.in-range):not(.active):not(.hovered-end),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today.force-inactive:not(.off):not(.hovered-end){border-radius:var(--ref-border-radius-sm);box-shadow:inset 0 0 0 1px var(--ref-color-grey-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-150);font-weight:var(--sys-text-style-body-bold-weight)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):hover{background-color:var(--ref-color-electric-blue-40)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive):not(.start-date):not(.end-date):active{background-color:var(--ref-color-electric-blue-60)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.available.in-range:not(.start-date):not(.end-date):hover{border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm) 0 0 var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.active.start-date:not(.end-date).range-picker-mode:not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):hover,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):hover{background-color:var(--ref-color-electric-blue-100)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off):active,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off):active{background-color:var(--ref-color-electric-blue-80)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date.end-date.range-picker-mode:not(.force-inactive):not(.off),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.range-picker-mode):not(.force-inactive):not(.off){border-radius:var(--ref-border-radius-sm)}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.hovered-end:not(.off):not(.start-date):not(.end-date){background-color:var(--ref-color-electric-blue-150);color:var(--ref-color-white);font-weight:var(--sys-text-style-body-bold-weight);box-shadow:none;border-radius:0 var(--ref-border-radius-sm) var(--ref-border-radius-sm) 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.available.hovered-end:not(.off):not(.start-date):not(.end-date){border-radius:var(--ref-border-radius-sm)}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
|
|
452
452
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SymbolRegistry }], propDecorators: { datepickerRef: [{
|
|
453
453
|
type: ViewChild,
|
|
454
454
|
args: ['datepickerRef']
|
|
@@ -941,7 +941,7 @@ class DatepickerSelectComponent {
|
|
|
941
941
|
// NgxDaterangepickerMd module provides none — only its forRoot() does.
|
|
942
942
|
{ provide: LOCALE_CONFIG, useValue: {} },
|
|
943
943
|
LocaleService,
|
|
944
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "panelFooter", "firstDayOfWeek", "locale", "presets", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition", "disabled"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
944
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-default-color)}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:has(:focus-visible):not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "panelFooter", "firstDayOfWeek", "locale", "presets", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition", "disabled"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
945
945
|
}
|
|
946
946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, decorators: [{
|
|
947
947
|
type: Component,
|
|
@@ -966,7 +966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
966
966
|
class: 'ap-datepicker-select',
|
|
967
967
|
'[class.ap-datepicker-select--open]': 'isOpen()',
|
|
968
968
|
'[class.ap-datepicker-select--multiple]': 'mode() === DatepickerMode.Multiple',
|
|
969
|
-
}, encapsulation: ViewEncapsulation.None, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"] }]
|
|
969
|
+
}, encapsulation: ViewEncapsulation.None, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-default-color)}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:has(:focus-visible):not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"] }]
|
|
970
970
|
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], maxRangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRangeDays", required: false }] }], panelHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHint", required: false }] }], panelFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooter", required: false }] }], canSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelect", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], timeZoneTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZoneTooltip", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }] } });
|
|
971
971
|
|
|
972
972
|
/**
|