@symphony-talent/component-library 3.86.1 → 3.88.0
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/esm2020/lib/atoms/contextual-menu/contextual-menu.component.mjs +2 -2
- package/esm2020/lib/atoms/input-checkbox/input-checkbox.component.mjs +2 -2
- package/esm2020/lib/atoms/input-chips/input-chips.component.mjs +2 -2
- package/esm2020/lib/atoms/input-dropdown/input-dropdown.component.mjs +2 -2
- package/esm2020/lib/atoms/input-editable-text/input-editable-text.component.mjs +2 -2
- package/esm2020/lib/atoms/input-radio/input-radio.component.mjs +2 -2
- package/esm2020/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs +2 -2
- package/esm2020/lib/atoms/input-text/input-text.component.mjs +2 -2
- package/esm2020/lib/atoms/notifications/notifications.component.mjs +2 -2
- package/esm2020/lib/atoms/pill/pill.component.mjs +2 -2
- package/esm2020/lib/atoms/tooltip-wrapper/tooltip-wrapper.component.mjs +2 -2
- package/esm2020/lib/molecules/card/card.component.mjs +2 -2
- package/esm2020/lib/molecules/feedback-card/feedback-card.component.mjs +5 -4
- package/esm2020/lib/molecules/feedback-card/feedback-card.model.mjs +1 -1
- package/esm2020/lib/molecules/feedback-card/feedback-card.module.mjs +8 -4
- package/esm2020/lib/molecules/phaser-card/phaser-card.component.mjs +2 -2
- package/esm2020/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.component.mjs +3 -3
- package/esm2020/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.mjs +1 -1
- package/esm2020/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs +2 -2
- package/esm2020/lib/templates/feedback-detail-template/feedback-detail-template.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/contextual-menu/contextual-menu.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-checkbox/input-checkbox.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-chips/input-chips.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-dropdown/input-dropdown.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-editable-text/input-editable-text.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-radio/input-radio.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-text/input-text.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/notifications/notifications.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/pill/pill.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/tooltip-wrapper/tooltip-wrapper.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/molecules/card/card.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.component.mjs +5 -4
- package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.module.mjs +8 -4
- package/esm2020/projects/component-library/lib/molecules/phaser-card/phaser-card.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.component.mjs +3 -3
- package/esm2020/projects/component-library/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/templates/feedback-detail-template/feedback-detail-template.component.mjs +2 -2
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +69 -66
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +69 -66
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +69 -66
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +69 -66
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/molecules/feedback-card/feedback-card.model.d.ts +7 -0
- package/lib/molecules/feedback-card/feedback-card.module.d.ts +2 -1
- package/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.d.ts +1 -0
- package/package.json +1 -1
- package/projects/component-library/lib/molecules/feedback-card/feedback-card.model.d.ts +7 -0
- package/projects/component-library/lib/molecules/feedback-card/feedback-card.module.d.ts +2 -1
- package/projects/component-library/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.d.ts +1 -0
|
@@ -16,10 +16,10 @@ export class ContextualMenuComponent {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
ContextualMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px
|
|
19
|
+
ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"], directives: [{ type: i1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trimId": i3.TrimIdPipe } });
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: 'symphony-contextual-menu', template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px
|
|
22
|
+
args: [{ selector: 'symphony-contextual-menu', template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"] }]
|
|
23
23
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
24
24
|
type: Input
|
|
25
25
|
}], itemClick: [{
|
|
@@ -14,10 +14,10 @@ export class InputCheckboxComponent {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
InputCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
-
InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
17
|
+
InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputCheckboxComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'symphony-input-checkbox', template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"] }]
|
|
20
|
+
args: [{ selector: 'symphony-input-checkbox', template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"] }]
|
|
21
21
|
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
|
|
22
22
|
type: Input
|
|
23
23
|
}], label: [{
|
|
@@ -73,10 +73,10 @@ export class InputChipsComponent {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
InputChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
76
|
-
InputChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputChipsComponent, selector: "symphony-input-chips", inputs: { chips: "chips", autocompleteList: "autocompleteList", validators: "validators", asyncValidators: "asyncValidators", errorMessages: "errorMessages", controlName: "controlName", form: "form", label: "label", isDisabled: "isDisabled" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px
|
|
76
|
+
InputChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputChipsComponent, selector: "symphony-input-chips", inputs: { chips: "chips", autocompleteList: "autocompleteList", validators: "validators", asyncValidators: "asyncValidators", errorMessages: "errorMessages", controlName: "controlName", form: "form", label: "label", isDisabled: "isDisabled" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"], components: [{ type: i1.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { type: i2.ChipComponent, selector: "symphony-chip", inputs: ["chipLabel", "hasClose", "hasError"], outputs: ["removeChip"] }, { type: i1.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
77
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputChipsComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
79
|
-
args: [{ selector: 'symphony-input-chips', encapsulation: ViewEncapsulation.None, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px
|
|
79
|
+
args: [{ selector: 'symphony-input-chips', encapsulation: ViewEncapsulation.None, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"] }]
|
|
80
80
|
}], ctorParameters: function () { return []; }, propDecorators: { chips: [{
|
|
81
81
|
type: Input
|
|
82
82
|
}], autocompleteList: [{
|
|
@@ -22,10 +22,10 @@ export class InputDropdownComponent {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
InputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px
|
|
25
|
+
InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff!important;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff!important;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: 'symphony-input-dropdown', template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px
|
|
28
|
+
args: [{ selector: 'symphony-input-dropdown', template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff!important;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff!important;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"] }]
|
|
29
29
|
}], ctorParameters: function () { return []; }, propDecorators: { inputDropdownListModel: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], disableBtn: [{
|
|
@@ -49,10 +49,10 @@ export class InputEditableTextComponent {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
InputEditableTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i3.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
52
|
+
InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i3.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
|
|
55
|
+
args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
|
|
56
56
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
57
57
|
type: Input
|
|
58
58
|
}], type: [{
|
|
@@ -14,10 +14,10 @@ export class InputRadioComponent {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
InputRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
-
InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
17
|
+
InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'symphony-input-radio', template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
|
|
20
|
+
args: [{ selector: 'symphony-input-radio', template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
|
|
21
21
|
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
|
|
22
22
|
type: Input
|
|
23
23
|
}], label: [{
|
|
@@ -176,10 +176,10 @@ export class InputSearchCheckboxDropdownComponent {
|
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
InputSearchCheckboxDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, deps: [{ token: i1.CapitalizeFirstCharacterPipe }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
179
|
-
InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"], components: [{ type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": i1.CapitalizeFirstCharacterPipe } });
|
|
179
|
+
InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"], components: [{ type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": i1.CapitalizeFirstCharacterPipe } });
|
|
180
180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
182
|
-
args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"] }]
|
|
182
|
+
args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"] }]
|
|
183
183
|
}], ctorParameters: function () { return [{ type: i1.CapitalizeFirstCharacterPipe }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pop: [{
|
|
184
184
|
type: ViewChild,
|
|
185
185
|
args: ['pop', { static: false }]
|
|
@@ -26,10 +26,10 @@ export class InputTextComponent {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
29
|
+
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'symphony-input-text', template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
|
|
32
|
+
args: [{ selector: 'symphony-input-text', template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
|
|
33
33
|
}], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
|
|
34
34
|
type: Input
|
|
35
35
|
}], icon: [{
|