ngx-academia-uniandes-library/lib/academia-widgets/academygeneral/dependency.option.combobox/dependency-option-combobox/dependency-option-combobox.component.metadata.json

This library is used for Academia-Uniandes system.

[{"__symbolic":"module","version":4,"metadata":{"DependencyOptionComboboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../combo-box/combo-box","name":"ComboBox","line":10,"character":55},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"app-dependency-option-combobox","template":"\n    <ng-template [ngIf]=\"(compact && !multiSelect)\">\n      <div>\n        <select [disabled]=\"disabled\" id=\"combobox1\" class=\"combobox form-control\" [(ngModel)]=\"selectedSingle\" (change)=\"onSelectionChange()\">\n          <option [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\" [ngValue]=\"element\">{{(element.object == null?\"UNASIGNED\":element.object.nameid)| translate }}</option>\n        </select>\n      </div>\n    </ng-template>\n\n    <ng-template #checkactiveoption [ngIf]=\"(!compact && multiSelect)\">\n      <div class=\"comboselectlist\">\n        <div>\n          <div [(hidden)]=\"element.hidden\" *ngFor=\"let element of data;let i = index\">\n            <label for=\"{{'checkactiveoption'+(element.object!=null?element.object.description+num[i]:'-1')}}\" class=\"b-contain\">\n              <span>{{(element.object != null?element.object.nameid:\"selectAll\")| translate }}</span>\n              <input (change)=\"onMultipleListElementClicked(element)\" [disabled]=\"disabled\" [checked]=\"element.selected\" type=\"checkbox\" name=\"{{'checkactiveoption'+(element.object!=null?element.object.description+num[i]:'-1')}}\" id=\"{{'checkactiveoption'+(element.object!=null?element.object.description+num[i]:'-1')}}\"\n              />\n              <div class=\"b-input\"></div>\n            </label>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template #optionactiveoption [ngIf]=\"(!compact && !multiSelect)\">\n      <div class=\"comboradiolist\">\n        <div [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\">\n          <label (click)=\"onSelectSingleElement(element)\" for=\"{{'radiodepenoptactiveoption'+(element.object!=null?element.object.description:'-1')+optionInstance}}\" class=\"b-contain\">\n            <span>{{(element.object != null?element.object.nameid:\"UNASIGNED\")| translate }}</span>\n            <input [disabled]=\"disabled\" [checked]=\"element.selected\" type=\"radio\" name=\"{{'radiogroupdepenoptactiveoption'+optionInstance}}\" id=\"{{'radiodepenoptactiveoption'+(element.object!=null?element.object.description:'-1')+optionInstance}}\"\n            />\n            <div class=\"b-input\"></div>\n          </label>\n        </div>\n      </div>\n    </ng-template>\n  ","styles":["\n    .comboselectlist,\n    .comboradiolist {\n      display: flex;\n      justify-content: space-around;\n    }\n\n    .b-contain *,\n    .b-contain *::before,\n    .b-contain *::after {\n      box-sizing: content-box !important;\n    }\n\n    .b-contain input {\n      position: absolute;\n      z-index: -1;\n      opacity: 0;\n    }\n\n    .b-contain span {\n      line-height: 1.49;\n      font-size: 1rem;\n      font-family: inherit;\n    }\n\n    .b-contain {\n      display: table;\n      position: relative;\n      padding-left: 1.8rem;\n      cursor: pointer;\n      margin-bottom: 0.5rem;\n    }\n\n    .b-contain input[type=\"checkbox\"] ~ .b-input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 1.25rem;\n      width: 1.25rem;\n      background: rgba(241, 245, 248, 1);\n      transition: background 250ms;\n      border: 1px solid rgba(184, 194, 204, 1);\n      border-radius: 0.125rem;\n    }\n\n    .b-contain input[type=\"radio\"] ~ .b-input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 1.25rem;\n      width: 1.25rem;\n      background: rgba(241, 245, 248, 1);\n      transition: background 250ms;\n      border: 1px solid rgba(184, 194, 204, 1);\n      border-radius: 2rem;\n    }\n\n    .b-contain input[type=\"checkbox\"] ~ .b-input::after {\n      content: \"\";\n      position: absolute;\n      display: none;\n      left: 0.45rem;\n      top: 0.18rem;\n      width: 0.25rem;\n      height: 0.6rem;\n      border: solid rgba(255, 255, 255, 1);\n      border-width: 0 2px 2px 0;\n      transition: background 250ms;\n      transform: rotate(45deg);\n    }\n\n    .b-contain input[type=\"radio\"] ~ .b-input::after {\n      content: \"\";\n      position: absolute;\n      display: none;\n      left: 0.25rem;\n      top: 0.25rem;\n      width: 0.75rem;\n      height: 0.75rem;\n      border-radius: 2rem;\n      background: rgba(255, 255, 255, 1);\n      transition: background 250ms;\n    }\n\n    .b-contain input:disabled ~ .b-input::after {\n      border-color: rgba(135, 149, 161, 1);\n    }\n\n    .b-contain input:checked ~ .b-input::after {\n      display: block;\n    }\n\n    .b-contain:hover input ~ .b-input,\n    .b-contain input:focus ~ .b-input {\n      background: rgb(231, 238, 243);\n    }\n\n    .b-contain input:focus ~ .b-input {\n      box-shadow: 0 0 0 2px rgba(220, 194, 52, 0.5);\n    }\n\n    .b-contain input:checked ~ .b-input {\n      background: rgba(255, 178, 41, 1);\n      border-color: rgba(255, 178, 41, 1);\n    }\n\n    .b-contain input[type=\"checkbox\"]:disabled ~ .b-input {\n      background: rgba(241, 245, 248, 1);\n      border-color: rgba(184, 194, 204, 1);\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .b-contain input[type=\"radio\"]:disabled ~ .b-input {\n      background: rgba(241, 245, 248, 1);\n      border-color: rgba(184, 194, 204, 1);\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .b-contain input[type=\"radio\"]:disabled ~ .b-input::after {\n      background: rgba(135, 149, 161, 1);\n    }\n\n    .b-contain input:checked:focus ~ .b-input,\n    .b-contain:hover input:not([disabled]):checked ~ .b-input {\n      background: rgba(255, 178, 41, 1);\n      border-color: rgba(255, 178, 41, 1);\n    }\n\n    .b-contain .b-input::before {\n      content: \"\";\n      display: block;\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 3rem;\n      height: 3rem;\n      margin-left: -0.85rem;\n      margin-top: -0.85rem;\n      background: rgba(255, 178, 41, 1);\n      border-radius: 2rem;\n      opacity: 0.6;\n      z-index: 99999;\n      transform: scale(0);\n    }\n\n    @keyframes b-ripple {\n      0% {\n        transform: scale(0);\n      }\n\n      20% {\n        transform: scale(1);\n      }\n\n      100% {\n        opacity: 0;\n        transform: scale(1);\n      }\n    }\n\n    @keyframes b-ripple-duplicate {\n      0% {\n        transform: scale(0);\n      }\n\n      30% {\n        transform: scale(1);\n      }\n\n      60% {\n        transform: scale(1);\n      }\n\n      100% {\n        opacity: 0;\n        transform: scale(1);\n      }\n    }\n\n    .b-contain input + .b-input::before {\n      animation: b-ripple 250ms ease-out;\n    }\n\n    .b-contain input:checked + .b-input::before {\n      animation-name: b-ripple-duplicate;\n    }\n\n    .b-contain .b-input::before {\n      visibility: hidden;\n    }\n\n    .b-contain input:focus + .b-input::before {\n      visibility: visible;\n    }\n\n    .b-contain:first-child .b-input::before {\n      visibility: hidden;\n    }\n  "]}]}],"members":{"num":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"setData":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]